Change image source on click from another image [JQuery]

Question

I have a carousel menu, see the screenshot below:

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).

Answer 1

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;
    });
});