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

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

$("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!');
});

使用javascript定位ajax插入的按钮

3 个答案: