javascript - 使用 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 加载后注入(inject) DOM。

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

注意:而不是 body，应该绑定(bind)到它最近的非动态父元素。如果您的 #uploaded-images-thumb 是非动态的，那么最好对其进行绑定(bind)。喜欢:

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

更多详情请查看.on()