使用javascript定位ajax插入的按钮

Question

你好我在访客上传图片时用ajax按钮插入这个图像

for (var i = 0; i < data.length; i = i + 1) {
    imageThump += '<img src="' + data[i].path + '" />';
    imageThump += '<button id="edit-details" type="button" class="btn btn-info">Edit Details</button>';
}
$('#uploaded-images-thumb').append(imageThump);

我想用javascript定位按钮，但它一直失败???

$('#edit-details').on('click', function(){
    console.log('clicked');
});

Answer 1

您需要处理动态事件（即实时事件）。 在DOM加载后，按钮注入DOM。

$('body').on('click', '#edit-details', function(){
    console.log('clicked');
});

注意：应该绑定到最接近的非动态父元素，而不是body 。 如果#uploaded-images-thumb是非动态的，那么最好绑定它。 喜欢：

$('#uploaded-images-thumb').on('click', '#edit-details', function(){
    console.log('clicked');
});

有关详细信息，请检查.on（）

Answer 2

您需要委派事件 ，因为当您插入事件处理程序时，该元素不存在：

$("body").on('click', '#edit-details', function(){
    console.log('clicked');
});

所以我们选择了body ，它是一个静态标记，并将事件委托给它们。 另外，作为旁注，最好将事件绑定到最近的静态父级而不是绝对父级，即document或body 。

在您的示例中，它可能是这样的：

$("#uploaded-images-thumb").on('click', '#edit-details', function(){
    console.log('clicked');
});

Answer 3

正是上面提到的是答案。 本质上，元素不具有与现有DOM元素相同的事件（单击），因此当它动态生成时，您无法访问新元素所需的事件。

为了扩展其他海报提到的内容，以下是结构概念的一个小例子。

<div id="element-wrapper">
    <button class="my-btn">Existing Button (has event)</button>
    <button class="my-btn">Existing Button (has event)</button>
    <button class="my-btn">Just Dynamically Added to DOM!!!</button>
</div>

下面的代码适用于除最后一个之外的所有按钮：

$('.my-btn').click(function() {
   alert('Clicked!');
});

下面的代码适用于所有按钮（因为'＃element-wrapper'不是动态的）：

$('#element-wrapper').on('click', '.my-btn', function() {
   alert('Clicked!');
});