Javascript 将单击事件绑定到使用jQuery on（）动态加载的实体

这是一个经常被问到的问题，但我无法找到解决问题的方法

我有一个HTML表，其中的数据是使用ajax加载的。我需要将单击事件绑定到删除链接。由于这些数据是使用ajax加载的，所以我尝试使用jQuery on（）方法，如下所示

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

但这不起作用。下面是我的HTMLDOM的一个简单示例

<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>

1.
管理
1.
管理
1.
管理

---

有人能帮我吗？用class代替id

<td class='action'>
         <a class="deleteTrigger" href="#">Delete</a>
</td>

---

这可能对你有帮助

没有通过ajax加载触发的

load

事件，因此尝试使用它不会有任何效果

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

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

如果将HTML更改为类名，如下所示：

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

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

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

如果即使是表的顶部也是动态加载的，那么您也可以更改为DOM中较高的其他静态父级（您应该选择一个尽可能靠近内容的父级，只要它不是动态加载的），如下所示：

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

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

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

您可以使用

.on（）

查看委托事件处理的其他参考：