jQuery "alert" fires but setting img "src" is ignored?
<p>Following on from this question:<br>
<a href="http://stackoverflow.com/questions/10350139/cant-i-use-jquery-inside-my-fancyzoom-popup">Can&#39;t I use JQuery inside my FancyZoom popup?</a></p>

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

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

<p>Here's what we have:</p>

<pre><code>&lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/fancyzoom.js"&gt;&lt;/script&gt;

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

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

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

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