Question

这个问题我花了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();
}

Answer 1

正在发生这种情况，因为默认情况下jQuery事件不会绑定到动态添加的元素。您需要使用一个名为事件委派的概念，您必须确保动态添加该表到一个静态元素，所以你可以用它作为参考。

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

});

在此处Event Delegation和.on() Method了解详情。也做一些谷歌搜索希望这有帮助

J Query分页插件不适用于html表中动态添加的行

1 个答案: