Datatables - 通過Ajax Source/Ajax Reload加載到表中的按鈕不會調用Jquery點擊事件

Question

我已經正確加載了我的JQuery和Datatables代碼到頁面中。我的數據從Datatables初始化函數的sAjaxSource選項加載。

我正在將按鈕加載到具有應該允許JQuery單擊時觸發函數的類和ID的單元中。由於Datatable使用分頁，所以只有第一個頁面可以工作，因爲一旦Datatable初始化（使用fnInitComplete），就會將JQuery click函數作爲函數調用加載。

我曾經遇到過一個問題，並意識到我必須在初始化Datatable之前將數據加載到HTML中，並且所有對JQuery click函數的調用都起作用，但那是使用HTML表格數據，而不是來自Ajax Source 。

總之，我的JQuery點擊函數沒有運行在通過AjaxSource加載到表中的元素上。 （僅供參考，我的點擊功能試圖將不同的數據重新加載到表中，第一次重新加載後，根本沒有點擊事件，所以我擔心我的第二個問題也會在這之後運行點擊事件）。我的代碼如下。

<script src="fnReloadAjax.js"></script> 
<script> 
$(document).ready(function() { 

      //Any table related events need to go in here so that it initialises post data load 
      function tableInit() { 
       $('.myButton').click(function() { 
        oTable.fnReloadAjax('mySource2.php'); 
       }); 
      } 

      var oTable; 
      oTable = $("#taskTable").dataTable({ bSort: true, 
       "bProcessing": true, 
       "sAjaxSource": 'mySource1.php', 
       bAutoWidth: true, 
       "iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100], // can be removed for basic 10 items per page 
       "sPaginationType": "full_numbers", 
       "aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}], 
       "fnInitComplete": function(oSettings, json) { 
        tableInit(); 
       } 
      }); 
     }); 
</script> 

Answer 1

Jquery的傳統事件處理不適用於動態添加的內容。你應該使用delegated events。取而代之的是：

function tableInit() 
{ 
    $('.myButton').click(function() { 
      oTable.fnReloadAjax('mySource2.php'); 
     }); 
} 

你應該這樣做：

function tableInit() 
{ 
    $('anyParentSelector').on('click','.myButton',function() { 
     oTable.fnReloadAjax('mySource2.php'); 
    }); 
} 

請注意，我沒有把「anyParentSelector」，也可能是body甚至document，但最佳實踐建議它是最您的動態創建的.myButton元素的直接靜態父項。這是出於性能原因...