Question

当我的页面加载时，我有一些从db生成的小图像：

$.getJSON('inc/API.php',
{
    command: "get_ads_to_display"
},
function(result){
    $("#img_main").attr('src', 'images/'+result[0].ad_image_filename);
    for(var i = 0; i<result.length; i++)
    {
        $("<div class='div_item_container'>"+
            "<div class='div_ad_name'>"+result[i].ad_publisher+"</div>"+
            "<div class='div_ad_image'><img src='images/"+result[i].ad_image_filename+"' /></div>"+
        "</div>").appendTo("#gallery");
    }
});

我还有主要图片img_main。我想要的是将这个主要图像的src更改为点击的小图像的来源（它应该是某种类型的图库）。我在getJSON函数之后尝试了这个：

$(".div_ad_image img").click(function(){
    $("#img_main").attr('src', $(this).attr('src'));
});

但它不起作用，图像src没有改变。尝试使用不同的选择器，尝试将此代码放在appendTo("#gallery");部分之后，但仍然没有结果。那怎么办呢？

Answer 1

您需要使用event delegation，以便点击事件可以绑定到动态创建的图像：

$('.div_item_container').on('click', '#div_ad_image img', function() {
    $("#img_main").attr('src', $(this).attr('src'));
});

Answer 2

正在动态添加图片。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

$('#gallery').on('click', '.div_ad_image img', function() {
    $("#img_main").attr('src', $(this).attr('src'));
});

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

单击时将图像源更改为动态图像源

2 个答案: