javascript - jQuery .on 绑定不触发

Question

我通过 AJAX 请求数据并将其附加到页面，如下所示：

$('#post-images').append('<div class="image-holder"><img src="' + resp.images[i].imageUrl + '" /><br /><input type="checkbox" value="' + i + '" /></div>');

我已经设置了一个事件监听器来监听点击事件：

$('.image-holder').on('click', function() {
    alert("testing");
});

但是，该方法永远不会被触发。

使用 Chrome 开发人员工具，我可以看到正确的 HTML 被插入到页面中，并且.image-holderdiv 被点击（它没有 1x1 尺寸或其他东西）。

Answer 1

这段代码：

$('.image-holder').on('click', function() {
    alert("testing");
});

仅将事件处理程序绑定到运行该代码时存在的对象。如果稍后将对象添加到页面中，它们将没有事件处理程序。

相反，您可以使用这样的委托形式.on()：

$("#post-images").on('click', '.image-holder', function() {
    alert("testing");
});

This will bind a single event handler to #post-images which will catch the bubbling up clicks coming from any child objects that match the selector .image-holder so it will work with dynamically added objects.