Change image source on click from another image [JQuery]

Question

I have a carousel menu, see the screenshot below:

screenshot

When I click on "Macchine" the <div> containing a big image appears (in the example the big green image with the number 1). Besides a table with thumbnails is generated automatically below in another <div> through JQuery. I would like that when I click on a thumbnail, a bigger version of the same image appears in the carousel menu.

This is the part of the carousel menu:

<div class="container">
<div id="demo">
<ol>
..........
<li id="macchine">
<h2><span>Macchine</span></h2>

<div class="slideshow" id="kenburns"><img id="img-macchine" alt="1"
                            src="1.gif"></div>
<p class="ap-caption">Macchine</p>
</li>
.......
</ol>
</div>
</div>

This is the JQuery code I used for changing the image in the carousel menu when clicking on a thumbnail (with id=img1):

<script>
    $(document).ready(function() { // when the document is loaded
    var img;
    $('#img1').click(function() {
        img = 'produzione1.gif';
        $('#macchine img').attr("src", img);
        return false;
    });
});
</script>

I also tried using '$('#img-macchine').attr("src", img); (They should be equivalent for identifying the image).

I stored the source path of the image that has to be loaded, in the img variable, then I use the attr() method in jquery but when I click on the thumbnail the image in the carousel doesn't change. (I used a completely different image so that the change would be easier to notice). Nothing happens apparently. Am i doing anything wrong? Can you help me to solve the problem? (Of course the path of the image that has to be loaded is correct).

The mouse pointer changes so probably yes, I may add an alert() function for checking if it gets executed. — Fabio, Feb 08 '14 at 13:54
mouse pointer has nothing to do with any click event attached, ya, test it using an alert(). — A. Wolff, Feb 08 '14 at 13:55
I added "alert("executed");" inside the click event but no popup appears. I don't have much experience with js and jquery anyway I can't see the mistake at the moment. — Fabio, Feb 08 '14 at 14:03
If thumnail elements are generated dynamically, you need to delegate event. Retest using e.g: `$(document).on('click','#img1', function(){...});` — A. Wolff, Feb 08 '14 at 14:06
It works, thanks a lot! I thought that using $(document).ready(function() {} could be enough for executing the event after the thumbnails were generated dynamically but apparently it wasn't enough. Instead delegating the event to the click event works. If you write an answer with this solution I'll approve it. — Fabio, Feb 08 '14 at 14:23

score 1 · Accepted Answer · answered Feb 08 '14 at 14:29

For dynamic generated elements, you need to delegate event. For example:

$(document).on('click','#img1', function(){
    img = 'produzione1.gif';
    $('#macchine img').attr("src", img);
});

Now instead of using document, you should delegate to closest static container, maybe:

$(document).ready(function () { // when the document is loaded
    var img;
    $('.container').on('click', '#img1', function () {
        img = 'produzione1.gif';
        $('#macchine img').attr("src", img);
        return false;
    });
});

Thanks for your answer. You solved my problem and I learnt a new thing. — Fabio, Feb 08 '14 at 14:37

Change image source on click from another image [JQuery]

1 Answers1