将单击事件绑定到使用jQueryon(）动态加载的实体

Binding a click event to entities loaded dynamically using jQuery on()

本文关键字：动态 加载 实体 jQueryon 事件 单击 绑定      更新时间：2023-09-26

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

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

$('.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>

有人能帮我吗

通过ajax加载不会触发load事件，因此尝试使用它不会有任何效果。

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

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

如果您将HTML更改为这样的类名：

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

然后，假设表的顶部不是动态加载的，您可以通过委托的事件处理绑定到它，如下所示：

$(".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():进行委托事件处理的其他参考资料

jQuery.live（）与.on（）方法在加载动态html 后添加点击事件

jQuery.on不起作用，但.live起作用

jQuery.on（）是否适用于创建事件处理程序后添加的元素？

使用class而不是id

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

和javascript

$(document).on("click",".deleteTrigger",function(e){
          alert('called..');
          e.preventdefault()
});

这可能对你有帮助。

相关文章：