从另一个图像点击更改图像源[JQuery]

Question

我有旋转木马菜单，请参见下面的屏幕截图：

当我点击“Macchine”时，会出现包含大图像的<div>（在示例中为数字为1的绿色大图）。除了通过JQuery在另一个<div>下面自动生成一个带有缩略图的表格。我希望当我点击缩略图时，旋转木马菜单中会出现更大版本的相同图像。

这是轮播菜单的一部分：

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

这是我在点击缩略图（id = img1）时用于更改轮播菜单中图像的JQuery代码：

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

我也尝试过使用'$('#img-macchine').attr("src", img);（它们应该等同于识别图像）。

我在img变量中存储了必须加载的图像的源路径，然后在jquery中使用了attr()方法，但是当我点击缩略图时，旋转木马中的图像不会改变。 （我使用了完全不同的图像，以便更容易注意到变化）。显然没有任何事情发生。我做错了吗？你能帮我解决一下这个问题吗？ （当然，必须加载的图像路径是正确的。）

Answer 1

对于动态生成的元素，您需要委派事件。 例如：

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

现在代替使用文档，您应该委托给最近的静态容器，可能是：

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