Question

我在我的代码中使用Jquery Datatable。我通过ajax请求加载数据。对于在我的表中创建的每一行，有一个名为delete的按钮。此按钮的单击事件读取名为＆＃34; r_id＆＃34;的属性。然后在我的数据库中应用软删除。我的代码如下：

$(document).ready(function () {
var parity = 3;
var tr = "";
$.ajax({
        url: "https://" + window.myLocalVar + "/api/rewards/findAllRewardsByStatusID/" + parity,
        type: "GET",
        dataType: 'json',
        contentType: 'application/json',
        success: function (rewards) {
            if (rewards.length > 0) {
                for (var i = 0; i < rewards.length; i++) {
                    var reward = rewards[i].Reward;
                    var reward_price = "$ " + rewards[i].Price;
                    var r_id = rewards[i].RewardID;
                    tr += '<tr r_id="' + r_id + '">\
                        <td>' + reward + '</td>\
                        <td>' + reward_price + '</td>\
                        <td>\
                            <button r_id="' + r_id + '" type="button" class="btn btn-danger delete">delete</button>\
                        </td>\
                    </tr>';
                    if (i % 10 == 0 || i == rewards.length - 1) {
                        $("#submitted_rewards > tbody").append(tr);
                        tr = "";
                    }
                }
            }
            $('#submitted_rewards').on('init.dt', function () {
                // click event for each tr
                $("#submitted_rewards tbody tr td:not(:last-child)").on("click", function () {
                    var r_id = $(this).parent().attr("r_id");
                    window.location.href = "./reward-info.aspx?id=" + r_id;
                });

                $(".delete").click(function () {
                    var r = $(this).attr("r_id");
                    $("tr[r_id=" + r + "]").fadeOut();
                });
            }).DataTable({
                "scrollX": true,
                stateSave: true
            });

        },
        error: function (err) {
            if (err) {
                console.log(err);
            }
        }
    });
});

此代码加载我的Jquery Datatable中的数据，名为＆＃34; submitted_rewards＆＃34;正确。表格的页面大小设置为＆＃39; 10＆＃39;默认情况下（每页10行）。现在，我试图转到第二页并单击该行以重定向到另一个页面或者如果我尝试单击删除按钮以删除行而它不起作用！这些事件仅适用于用户第一次登陆的页面。我正在保存表的状态，这意味着如果我从第1页切换到第2页，则刷新该页面。第2页中每行的事件只能起作用。

我尝试使用事件initComplete，但它没有用。不知道如何解决这个问题。

谢谢！

Answer 1

如果你将处理程序附加到DOM元素并且那些DOM元素被破坏，那么处理程序将不再有效，并且相关代码将在某些时候被垃圾收集。

当您通过执行window.location.href = ...更改页面时，您正在使用替换它的页面中的新集合替换DOM元素（和脚本）。因此，您的处理程序将不再适用。

您可以通过几种方式解决此问题。

1）您需要向正在加载的每个页面添加脚本，并在DOM准备就绪时执行该脚本，并将处理程序应用于该页面上的DOM元素。

2）执行另一个ajax请求以获取新数据并替换页面上的某些元素。使用jQuery的.delegate（）将处理程序自动附加到某些元素，即使您稍后添加它们也是如此。

Answer 2

它之所以不工作，是因为我每隔10行附加一次表格。我一次性附加了表格的所有行，然后点击了事件，然后就可以了。如果我想继续每10行加载一次。然后我必须在if语句中移动事件，如下所示：

if (i % 10 == 0 || i == rewards.length - 1) {
   $("#submitted_rewards > tbody").append(tr);
   tr = "";
   $("#submitted_rewards tbody tr td:not(:last-child)").on("click", function () {
         var r_id = $(this).parent().attr("r_id");
         window.location.href = "./reward-info.aspx?id=" + r_id;
   });

   $(".delete").click(function () {
        var r = $(this).attr("r_id");
        $("tr[r_id=" + r + "]").fadeOut();
   });
}

为什么Jquery Datatable initComplete / onInit事件不起作用？

2 个答案: