Question

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

我有一个HTML表，其中使用ajax加载数据。我需要将click事件绑定到删除链接。由于这个数据是使用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，这些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() 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?

Answer 2

使用class而不是id

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

并在javascript中

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

这可能会对你有所帮助。

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

2 个答案: