Question

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

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

我已经设置了一个侦听click事件的事件监听器：

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

但是，该方法永远不会被解雇。

使用Chrome开发者工具我可以看到正确的HTML被插入页面，.image-holder div被点击（它没有1x1维度或其他东西）。

Answer 1

此代码：

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

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

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

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

这会将单个事件处理程序绑定到#post-images，这将捕获来自与选择器.image-holder匹配的任何子对象的冒泡点击，因此它将与动态添加的对象一起使用。

jQuery .on绑定没有触发

1 个答案: