javascript - 当我使用 datatable.fnAddData 附加 HTML 字符串时，jquery 函数没有触发

Question

当我使用 dataTable.fnAddData 附加 HTML 字符串时，jquery 函数没有触发。

所以我有一个函数 populateDataTable()，我需要两列来呈现图标而不是来自 JSON 的数据。因此，我试图在 fnAddData() 中附加包含元素类的 HTML 字符串。但不知何故，它没有触发图标上的点击事件。

  function populateDataTable(data) {
    $("#customerTable").DataTable().clear();
    var length = Object.keys(data).length;
    for(var i = 1; i < length+1; i++) {      

    var index = i - 1;
    var name = data[index].name;
    var queue = data[index].queue;
    var expire = data[index].expire;

    $('#customerTable').dataTable().fnAddData( [
        i,
        name,
        queue,
        '<td id="tb-manage-key" class="tb-manage-key"><div class="tb-btn manage-key-btn switch-view" data-hide="manageCustomers" data-title="@Resources.ManageKeys" data-target="manageKeys"><span></span></div></td>',
        '<td class="tb-manage-subs"><div class="tb-btn manage-subs-btn switch-view" data-hide="manageCustomers" data-title="@Resources.ManageSubscriptions" data-target="manageSubscriptions"><span></span></div></td>',
        expire,
        name
    ]);
}}



$('.tb-btn.switch-view').on('click', function(e) {
  e.preventDefault();
  switchView(this);
 console.log('Testing'); //not firing
});

图标正在显示，但没有按预期触发点击事件。下面的附件显示我们可以看到它按预期附加了 div。

---

解决方案

在 populateDataTable() 中添加点击事件。

$('#customerTable tbody').on('click', '.tb-btn.switch-view', function() {
    switchView(this);
});

Answer 1

你可以尝试不同的语法来监听点击事件...

$('td').on('click', '.tb-btn.switch-view', function(e) {
  e.preventDefault();
  switchView(this);
 console.log('Testing'); //not firing
});