將click事件綁定到使用jQuery on（）動態加載的實體

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是行不通的。 您應該使用一個類名。

解決動態加載元素上的事件處理程序的更好方法可能是對內容中的類名稱使用委托事件處理。

如果將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（）方法，用於在加載動態html后添加click事件

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

jQuery.on（）是否可用於創建事件處理程序后添加的元素？

Answer 2

使用類而不是id

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

和在JavaScript

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

這可能對您有幫助。