Question

希望为动态生成的图像添加事件侦听器。这是一个易于演示的简化示例：

HTML

<div id="container">
    <button>Click</button>
</div>

JS / jQuery的

$('button').on('click',function(){
    var $newImg = $('<div><img class="image" src="http://images.clipartpanda.com/ninja-clip-art-000056m.jpg" /></div>');
    $('#container').append($newImg);
});

$('.image').on("load", function(){
    $(this).after("This is a ninja");
});

参见JSFiddle：https://jsfiddle.net/jd1pruvx/

据我所知，我想要工作的最后一段代码是在加载新图像之前立即运行的，因此没有图像可以放置事件监听器。

我的解决方法是使用事件委派：

$(document).on('load', '.image', function(){
    $(this).after("This is a ninja");
});

这也不起作用。有什么建议吗？

Answer 1

您可以在创建后立即将事件侦听器添加到图像中。请注意，您需要单独创建图像容器。例如：

$('button').on('click',function(){
    var img = $('<img class="image" src="http://images.clipartpanda.com/ninja-clip-art-000056m.jpg" />');
    var imgContainer = $('<div></div>');
    imgContainer.append(img);
    $('#container').append(imgContainer);

    img.on('load', function(){
        $(this).after("This is a ninja");
    });
});

更新了小提琴here。

将事件放在动态生成的图像上

1 个答案: