數據表操作列和jquery單擊事件問題

Question

我正在使用帶有動作列的jquery數據表。 在該操作列中有兩個鏈接“編輯”和“刪除”。 我的表格正確填充此操作列。 但問題是我需要在點擊此數據表的編輯按鈕時打開一個自舉模式。 但它沒有打開我的模態。

這是我在datatable中創建動作列的方法：

var myTable = 
$('#view_user_table')
.DataTable({
  bAutoWidth: false,    
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "includes/process_view_bank_datatable.php",
  "aoColumnDefs": [{
                    "aTargets": [6],  
                    "bSortable": false,
                    "mData": "0",   
                    "mRender": function (data, type, full) {
                       return '<div class="hidden-sm hidden-xs action-buttons">' + 
                                '<a class="green edit_this_user" href="javascript:void(0)" data-bank_id="'+data+'">edit</a>' + 
                                '<a class="red" href="javascript:void(0)">delete</a>' + 
                              '</div>';                              
                    }
                  }
                ],
  "aaSorting": [],
  "iDisplayLength": 50,

  select: {
    style: 'multi'
  }
});

然后我嘗試打開我的模態，點擊我上面創建的編輯鏈接。

這是我嘗試的方式：

$('.edit_this_user').on('click', function() {
  alert('modal')  
}); 

但我無法得到警報。 誰能告訴我它不工作的原因是什么？

注意：我的控制台中不會出現任何錯誤。

Answer 1

對於動態生成的元素的事件綁定，您應該以這樣的方式編寫已經存在.on的父內容，然后是事件類型，然后是要在其上觸發事件的元素選擇器。 像這樣更改觸發器代碼並嘗試：

  $('#view_user_table').on('click', '.edit_this_user', function(){

  });

Answer 2

您的代碼不起作用，因為您嘗試將事件偵聽器附加到尚不存在的html。

你動態創建.edit_this_user （通過另一個腳本，在你的例子中它是Datatable插件），所以當加載文檔時（我想你是在加載時執行的代碼）沒有這樣的類的元素。

有很多問題，請檢查它們是否有正確的解釋：

• Jquery事件處理程序不處理動態內容

• Jquery將事件偵聽器添加到動態添加的元素中