javascript - 使用 jQuery 从 Ajax GET 响应中选择 HTML 元素

Question

我是一名编程学生，我正在尝试使用 HTML、JavaScript 和 jQuery 构建一个简单的网站，前端使用 node.js + Express 框架作为后端。

在这个例子中，我使用 Ajax 获取数据，然后将 HTML 代码 + 此数据附加到 id = 'listFile' 的 div 元素。实现工作正常，我能够看到 Ajax 附加的下载和删除按钮。

但是，当我使用 jQuery id 选择器选择删除按钮并发出警报时，它根本不起作用。看来我无法选择 Ajax 实现的删除按钮。

请为我解释为什么会发生这种情况，以及如何解决它。谢谢!

$.ajax({
    url: '/download',
    method: "get",
    success: function(data){
        for(i=1; i<data.length; i++){
            $('#listFile').append("<tr><td id='tab'><a href='#' class='list-group-item' id='"+data[i]+"' style='margin-top:5px' value='"+data[i]+"'>"+data[i]+"</a></td><td id='tab2' ><a href='#' style='width:90px' id='deleteButton' class='btn btn-danger'>Delete</a><a href='#' style='width:90px' id='downloadButton' class='btn btn-primary'>Download</a</td></tr>");
        }   
    }
});

$('#deleteButton').click(function(){
    alert("DELETED");
});

Answer 1

更改您的click 绑定(bind)，如下所示:

$(document).on('click', '#deleteButton',function(){
   alert("DELETED");
});

说明: $('#deleteButton').click 事件将仅在窗口加载成功时对可用的 DOM 元素起作用。由于删除按钮是使用 ajax 动态创建的，因此您应该使用 $(document).on('click', '#deleteButton',function(){ 以便它适用于当前可用的 DOM 元素

建议:多个删除按钮应该使用. class 而不是# id 并将绑定(bind)代码从 #deleteButton

更改为 .deleteButton