javascript - 在新插入的元素上应用 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 warning: table id=readiness_subtable_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

创建多个“子表”时

Answer 1

您的错误是由于尝试使用新/自定义 选项重新初始化数据表。确保您只初始化表一次或不更改传递给 .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>