javascript - 使用 jQuery on() 将单击事件绑定(bind)到动态加载的实体

Question

这是一个多次被问到的常见问题，但我无法找到解决我的问题的方法。

我有一个 HTML 表，其中的数据是使用 ajax 加载的。我需要将点击事件绑定(bind)到删除链接。由于此数据是使用 ajax 加载的，因此我尝试使用 jQuery on() 方法，如下所示。

$('.datagrid').on('load', '.action', function(){
        $('.action a#deleteTrigger').each(function() { 
            $(this).click(function() {
                alert('called..');
            })
        });
    })

但这行不通。下面是我的 HTML DOM 的简单说明。

<table class='datagrid'>
    <tr id="row-1">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
    <tr id="row-2">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
    <tr id="row-3">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td class='action'>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
</table>

有人可以帮我解决这个问题吗？

Answer 1

通过ajax加载不会触发load事件，因此尝试使用它不会完成任何事情。

此外，您的内容中似乎有重复的 ID。 id 在文档中必须是唯一的，尝试使用选择器查找重复的 id 是行不通的。您应该使用类名。

解决动态加载元素上的事件处理程序的更好方法可能是对内容中的类名使用委托(delegate)事件处理。

如果将 HTML 更改为如下所示的类名称:

<a class="deleteTrigger" href="#">Delete</a>

然后，假设表格顶部没有动态加载，您可以使用委托(delegate)事件处理来绑定(bind)它，如下所示:

$(".datagrid").on("click", ".deleteTrigger", function(e) {
    // click handler for delete button
});

如果甚至表格的顶部也是动态加载的，那么您可以更改为 DOM 中更高的其他静态父级(只要它不是动态加载的，您应该选择尽可能接近内容的父级)，例如这个:

$("selector of some static parent").on("click", ".deleteTrigger", function(e) {
    // click handler for delete button
});

您可以使用 .on() 查看有关委托(delegate)事件处理的其他引用资料:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?