JQuery分页插件不适用于html表中动态添加的行答案

【问题标题】：J Query pagination plugin not working for dynamically added rows in html tableJQuery分页插件不适用于html表中动态添加的行
【发布时间】：2016-08-23 12:13:13
【问题描述】：

我为这个问题花费了超过 6 个小时。如果有人能帮我解决这个问题，那就更好了。

我正在尝试在动态添加的 html 表中使用 jquery 分页插件。但它不起作用。它给出了例外。但是它适用于静态 html 表。

这是我的代码

 <link href="../assets/css/jquery.dataTables.min.css" rel="stylesheet" />
 <script src="../assets/js/jquery.dataTables.min.js.js"></script>

               <table id="productTable" >
                <thead class="alert-info text">
                    <tr>
                        <th><strong>Edit</strong></th>
                        <th><strong>Product Name</strong></th>
                        <th><strong>Introduction Date</strong></th>
                        <th><strong>URL</strong></th>
                        <th><strong>Delete</strong></th>
                    </tr>
                </thead>

jquery 是

function bindDate(res) {
    var d = res;
    $("#productTable tbody").remove();
    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("<tbody></tbody>");
    }
    if (d != null) {
        for (var i = 0; i < d.length; i++) {
            $("#productTable tbody").append(
            "<tr>" +
            "<td onclick='edit(this);' data-toggle='modal' data-target='#myModal'>" + "<img src='../assets/imgs/edit.ico' Height='30' Width='30'/>" + "</td>" +
            "<td style='display:none;'>" + d[i].ID + "</td>" +
            "<td>" + d[i].ProductName + "</td>" +
            "<td>" + d[i].IntroDate + "</td>" +
            "<td>" + d[i].URL + "</td>" +
            "<td onclick='pdelete(this);'>" + "<img        src='../assets/imgs/delete.png' Height='30' Width='30'/>" + "</td>" +
            "</tr>"
            );
        }
    }
  $('#productTable').DataTable();
}

【问题讨论】：

标签： javascript jquery html pagination

【解决方案1】：

这是因为默认情况下 jQuery 事件未绑定到动态添加的元素。您需要使用一个名为 事件委托 的概念，您必须确保表格是动态添加的到一个静态元素，以便您可以将其用作参考。

$('body').on('event', '#productTable', function(event){
//Replace event with the right event, like click or something...

});

在Event Delegation 和.on() Method 了解更多信息。也做一些谷歌搜索希望这会有所帮助

【讨论】：