使用javascript将ajax插入的按钮作为目标

您好，当访问者上传图像时，我用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);

---

您需要处理动态事件（也称为实时事件）。作为DOM加载后注入DOM的按钮

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

注意：应该绑定到最近的非动态父元素，而不是

body

。 如果你的

#上传图像拇指
是非动态的，那么最好绑定它。比如：

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

有关更多详细信息，请检查，因为插入事件处理程序时，元素不存在：

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

因此，我们选择了
body
，这是一个静态标记，并委托其中的事件。另外，作为旁注，最好将事件绑定到最近的静态父级，而不是绝对父级，即
文档
或
正文

在您的示例中，它可能类似于：

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

正是上面提到的答案。本质上，元素不具有与现有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>

以下代码适用于所有按钮（因为“#元素包装器”不是动态的）：

最好将事件绑定到最接近的父元素是的，警报在单词中只有一个引号，这只是一个示例。修正了报价问题。
<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').on('click', '.my-btn', function() {
   alert('Clicked!');
});