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

Question

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

我有一个使用ajax加载数据的HTML表。我需要将点击事件绑定到删除链接。由于这个数据是使用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

没有load事件触发通过ajax加载，所以试图使用它不会完成任何事情。

另外，它看起来像内容中有重复的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

使用类ID

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

，而不是和在javascript

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

这可能会帮助你。