将 jQuery 应用于 ajax 加载的 HTML 元素答案

【问题标题】：Applying jQuery to HTML elements loaded in by ajax将 jQuery 应用于 ajax 加载的 HTML 元素
【发布时间】：2015-11-07 12:06:28
【问题描述】：

我正在使用 jQuery 插件 DataTables 来修饰我的通用 html 表。我可以使用

<script> $(document).ready(function() { $('table.display').DataTable(); } ); </script>

在加载后为页面上的所有页面加载 DataTables 插件，但它不会追溯地对通过 AJAX 添加的任何表起作用（因为此时页面已经加载）。

如何确定

 $('table.display').DataTable();

是否也在添加到页面的表格上运行？

【问题讨论】：

您的 ajax 是用新数据替换之前存在的表格，还是只是在页面初始加载后加载表格？
@DelightedD0D 我都试过了，但都无法工作。基本上我在页面上有一个空的跨度，id 为“table”，然后使用 innerHTML 将表格放入页面中（因为这就是我们被教导做 ajax 的方式）。我还尝试将其插入到最初使用相同方法加载的表中（使用表的 id 代替）。然而，即使初始表工作正常，只要我通过该方法输入新数据，它就会失去所有 Datatables 排序功能。
是的，这就是我认为正在发生的事情。如果您自己手动更改表中的数据，则必须销毁旧数据表并初始化一个新数据表。请参阅下面的答案，它显示了一种方法来做到这一点。

标签： javascript jquery ajax datatables

【解决方案1】：

您可以尝试在 jQuery 中添加一个 ready() 事件侦听器，以便在加载每个 <table> 时（而不是在加载 document 时）进行操作。

只需添加另一个块，类似于您所拥有的：

$('table.display').ready(function() {
    $(this).DataTable();
});

【讨论】：

【解决方案2】：

您可以为新的DOM节点添加一个监听器，如果新添加的节点匹配table.display，则调用.DataTable()函数：

$(document).on('DOMNodeInserted', 'table.display' function(e) {
    $(this).DataTable();
});

【讨论】：

【解决方案3】：

因为必须在现有元素上调用 DataTable 函数，所以似乎没有办法让所有新的 table.display 元素通过插件自动实例化。尝试在 AJAX 成功回调中实例化新元素：

$.ajax({
  url: '/your/url',
  type: 'POST',
  success: function (data) { $('table.display').DataTable(); }
});

【讨论】：

【解决方案4】：

对于它的价值，我经常使用 ajax 定期刷新 DataTables。以下是我在 Ajax 成功处理程序中实例化 DataTables 的方式：

success: function (response) {
        var $table = $('#user-table');
        var $body = $('#user-table-body');
        if ($.fn.DataTable.isDataTable($table)) { // if already init, destroy it
            $table.dataTable().fnDestroy();
            $body.empty(); // empty body of table
        }
        $body.html(response['users-table']) // set new data to body of table 
        $table.DataTable({   // init datatable
            "order": [
                [2, "desc"]
            ]
        });
},

【讨论】：