jQuery "alert" fires but setting img "src" is ignored?

Question

Following on from this question:
Can't I use JQuery inside my FancyZoom popup?

The two answers to that question fixed the problem so that our Hello World alert fires consistently inside our FancyZoom popup.

However, what we really need to do is not fire off an alert but instead change the src of our img.

Here's what we have:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '#foo', function() { $('#foo').attr('src', 'i/image2.png'); alert('hello world'); });
    });
</script>
</head>

<body>
              <div id="Container">
                  <a id="myFancyZoomPopup" href="#Test"><span>test</span></a>
                  <div id="Test">
                      <p> this is some text in the popup</p>
                      <img id="foo" src="i/image1.png" />
                  </div>

                    <script type="text/javascript">
                        $('#myFancyZoomPopup').fancyZoom({ directory: 'i'});
                    </script>
                </div>
</body>
</html>

The "Hello World" is firing but the image source isn't changing from image1.png to image2.png.

have you tried this.src='i/image2.png'? rather than re-selecting the element that triggered the click? — scrappedcola, May 04 '12 at 15:18
According to http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery, `attr` should work. — Evan Mulawski, May 04 '12 at 15:19
My guess is that myFancyZoomPopup is creating a clone of the div, and then your image is actually being updated, it's just not the one that's visible in the fancy zoom popup — Bryan, May 04 '12 at 15:20
@BryanMoyles i think you're right, because without the FancyZoom setting the img src is working using the above code. do you have any idea how we resolve it without having to dig inside the inner workings of the FancyZoom library? — hawbsl, May 04 '12 at 15:23
Why do you bind the handler to the `document` when the element is available on the page? — cliffs of insanity, May 04 '12 at 15:26
I've posted a potential answer that can solve your answer :) Using classes lets the event be less strict to a single element, and then by updating $(this).attr it enforces that the attribute on the clicked image is updated — Bryan, May 04 '12 at 15:26
@user1370958 - This is to take advantage of delegate events. With this specification, the `on` handler functions as a combination of `live` and `delegate`, which means this works for most situations now and in the future. — Tejs, May 04 '12 at 15:27
@Tejs: I suppose it makes sense if the element is going to be removed and replaced with a different one with the same ID, but if not, it doesn't make much sense to use event delegation. — cliffs of insanity, May 04 '12 at 15:29
Very true, I was simply explaining why the OP might have chosen that particular logic. — Tejs, May 04 '12 at 15:31
@user1370958 i don't know if you clicked through to my preceding question, but i was guided by the answers there, to use `document` — hawbsl, May 04 '12 at 15:31
Oh, I see. According to those posts, the plugin does seem to remove and recreate the element. That's too bad. — cliffs of insanity, May 04 '12 at 15:35

score 2 · Answer 1 · answered May 04 '12 at 15:18

2

You could try setting the src the traditional way:

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '#foo', function() { 
          this.src = 'i/image2.png'; 
          alert('hello world'); 
        });
    });
</script>

answered May 04 '12 at 15:18

Sampson

265,109
74
539
565

trying with your change (after trying @BryanMoyles) works too ... thanks! though i think i understand why @BryanMoyles suggestion works, whereas I don't know if I understand _why_ your change fixes it. Ho hum, well now I have _two_ solutions. – hawbsl May 04 '12 at 15:36
That's exactly what `.prop` does in the background. – aziz punjani May 04 '12 at 15:44
@hawbsl Both of our solutions refer to the object that triggered the event, as opposed to attempting a lookup. Mine uses the raw JavaScript variables made available, whereas @BryanMoyles' solution uses the jQuery object as a pathway to the `src` property. – Sampson May 04 '12 at 16:11

score 2 · Accepted Answer · answered May 04 '12 at 15:26

2

Try using classes to make the dom not so sensitive to getElementById errors, and then when clicking, update $(this).attr so it targets the clicked element

<script type="text/javascript">
    $(document).ready(function() {
         $(document).on('click', '.foo', function() { $(this).attr('src', 'i/image2.png'); alert('hello world'); });
    });
</script>

<img class="foo" src="i/image1.png" />

answered May 04 '12 at 15:26

Bryan

6,682
2
17
21

What does `using classes to make the dom not so sensitive to getElementById errors` mean ? Why can you not use an ID ? – aziz punjani May 04 '12 at 15:45
You can use an ID, but let's say multiple fancy zoom boxes are created, why should the DOM know which element you're getting by ID, if there are multiple? It's like searching for a social security number, finding multiple, and expecting yourself to know exactly which one is correct – Bryan May 04 '12 at 16:11

score 0 · Answer 3 · answered May 04 '12 at 15:19

0

You would need to use the prop method to change the actual value; attr has different functionality in newer jQuery versions:

$('#foo').prop('src', 'newimg.png');

answered May 04 '12 at 15:19

Tejs

40,736
10
68
86

@Interstellar_Coder `$.prop` and `$.attr` are indeed different: http://api.jquery.com/prop/ – Sampson May 04 '12 at 15:25
According to the documentation, `attr` is now used to specify the HTML attribute VS that actual underlying DOM property. Specific browsers may deal with that differently, but that doesn't make it less true. – Tejs May 04 '12 at 15:25
1

I wasn't debating that, i was just debating that fact that it still works in newer versions so that's not the heart of the problem, but i do agree it's better practice to use the `.prop` in this case. – aziz punjani May 04 '12 at 15:30

jQuery "alert" fires but setting img "src" is ignored?

3 Answers3