在新插入的元素上应用 javascript 库

Question

我的代码使用“Datatable”库。 在 <table> 元素上初始化数据表

jQuery_3_3_1(".subtable").DataTable({ });

如何将其应用于新生成的元素？ （这不需要我重新渲染页面或为每个页面创建单独的 id 并初始化不同的表）。

编辑：我试过这个：

    jQuery_3_3_1('#readiness').on('click', 'td.details-control', function () {
        alert("potato");
        jQuery_3_3_1(".readiness_subtable").DataTable({ });
    });

但仍然被召回，Datatable 输出此错误消息：

DataTables 警告：表 id=readiness_subtable_0 - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3

当创建多个“子表”时

Answer 1

您的错误来自尝试使用 new / custom 选项重新初始化数据表。确保您只初始化表一次或不更改传递给 .DataTable() 的选项，请参阅此示例：

let tableData = `<table class="tablesToMakeAwesome">
    <thead>
          <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
              <td>2011/04/25</td>
              <td>$320,800</td>
          </tr>
          <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>63</td>
              <td>2011/07/25</td>
              <td>$170,750</td>
          </tr>
          <tr>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              <td>San Francisco</td>
              <td>66</td>
              <td>2009/01/12</td>
              <td>$86,000</td>
          </tr>
      </tbody>
  </table>`;
$(document).ready( function () {
  $('#test').append(tableData);
  $('.tablesToMakeAwesome').DataTable();
} );

function createTableWorking() {
  $('#test').append(tableData);
  $('.tablesToMakeAwesome').DataTable();
}

function createTableBreaking() {
  $('#test').append(tableData);
  // Cannot pass custom options to already initialized tables.
  $('.tablesToMakeAwesome').DataTable({ });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button onclick="createTableWorking()">Generate Table</button>
<button onclick="createTableBreaking()">Break Tables</button>
<div id="test">
  
</div>

我建议只在创建表并在 DOM 上呈现时对其进行初始化。这将允许您为其提供特定的表选项，并防止重新初始化可能因自定义选项出错的表。类似的东西：

function createTable() {
    let tableId = (new Date()).getMilliseconds();
    $('#test').append(`
      <table id="${tableId}">
          <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
            </tbody>
        </table>`);

    $('#' + tableId).DataTable();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<button onclick="createTable()">Generate Table</button>
<div id="test"></div>