Question

我正在推广和降级系统。一旦用户点击按钮，结果将立即更新并显示。功能正常。但我想通了，如果我继续按下提升/降级按钮。装载时间将继续增加。所以我尝试使用Firebug检查控制台，我发现了有关AJAX响应的问题。

按下按钮后，响应会继续增加。

我会附上截图。

enter image description here

从图像中，当我第一次和第二次点击按钮时，您可以看到AJAX响应。

enter image description here

这是我第三次点击时AJAX响应的结果。在我的浏览器崩溃之前，这个数字会不断增加。

我会在这里附上我的Javascript代码。

随意纠正我的错误编码。我会很感激的。

这是displayTable函数，它包含一些额外的点击事件功能。

function displayTable() {

$('#tableContent').empty();

$.post(base_url + "index.php/resident_detail_controller/selectAllUser", {}, function(data) {

    $('#tableContent').html(
            "<input type='hidden' id='totalRows' value='" + data.result.length + "' />" +
            "<table class='table table-bordered table-list-search sortable'>" +
            "<thead>" +
            "<tr>" +
            "<th class='text-center' style='font-size: 16px'>#</th>" +
            "<th class='text-center' style='font-size: 16px'>Email</th>" +
            "<th class='text-center' style='font-size: 16px'>Full Name</th>" +
            "<th class='text-center' style='font-size: 16px'>Contact Number</th>" +
            "<th class='text-center' style='font-size: 16px'>Status</th>" +
            "<th class='text-center' style='font-size: 16px'>Action</th>" +
            "</tr>" +
            "</thead>" +
            "<tbody>");

    if (data.status === 'Success') {

        for (var j = 0; j < data.result.length; j++) {

            if (data.result[j].Category === "N") {
                $('tbody').append(
                        "<tr>" +
                        "<td>" + j + "</td>" +
                        "<td><input type='hidden' id='email" + (j + 1) + "' value='" + data.result[j].Email + "' />" + data.result[j].Email + "</td>" +
                        "<td>" + data.result[j].FullName + "<input type='hidden' id='fullName" + (j + 1) + "' value='" + data.result[j].FullName + "'/></td>" +
                        "<td>" + data.result[j].ContactNo + "</td>" +
                        "<td class='text-center'>" + data.result[j].Category + "</td>" +
                        "<td class='text-center'>" +
                        "<button type='button' id='btnPromote" + (j + 1) + "' class='btn btn-sm btn-primary btnPromote' value='" + (j + 1) + "'>Promote</button>" +
                        "<i class='glyphicon glyphicon-arrow-up'></i>" +
                        "</td>" +
                        "</tr>");
            } else {
                $('tbody').append(
                        "<tr>" +
                        "<td>" + j + "</td>" +
                        "<td><input type='hidden' id='email" + (j + 1) + "' value='" + data.result[j].Email + "' />" + data.result[j].Email + "</td>" +
                        "<td>" + data.result[j].FullName + "<input type='hidden' id='fullName" + (j + 1) + "' value='" + data.result[j].FullName + "'/></td>" +
                        "<td>" + data.result[j].ContactNo + "</td>" +
                        "<td class='text-center'>" + data.result[j].Category + "</td>" +
                        "<td class='text-center'>" +
                        "<button type='button' id='btnDemote" + (j + 1) + "' class='btn btn-sm btn-info btnDemote' value='" + (j + 1) + "'>Demote</button>" +
                        "<i class='glyphicon glyphicon-arrow-down'></i>" +
                        "</td>" +
                        "</tr>");
            }
        }

        $(document).on("click", ".btnPromote", function(event) {

            //var index = $(this).attr('value');
            var index = String(event.target.value);

            var email = $('#email' + index).val();
            var username = $('#fullName' + index).val();
            $.post(base_url + 'index.php/resident_detail_controller/promoteUser', {email: email}, function(data) {

                if (data.status === 'Success') {
                    notif({
                        msg: '<b>You had successfully promoted ' + username + '</b>',
                        type: 'success'
                    });

                    $('#tableContent').empty();
                    displayTable();
                } else {
                    notif({
                        msg: '<b>You fail to promote ' + username + '</b>',
                        type: 'error'
                    });
                }

            }, 'JSON');
        });

        $(document).on("click", ".btnDemote", function(event) {

            var index = String(event.target.value);

            var email = $('#email' + index).val();
            var username = $('#fullName' + index).val();
            $.post(base_url + 'index.php/resident_detail_controller/demoteUser', {email: email}, function(data) {

                if (data.status === 'Success') {
                    notif({
                        msg: '<b>You had successfully promoted ' + username + '</b>',
                        type: 'success'
                    });

                    $('#tableContent').empty();
                    displayTable();
                } else {
                    notif({
                        msg: '<b>You fail to promote ' + username + '</b>',
                        type: 'error'
                    });
                }

            }, 'JSON');
        });

        $('#tableContent').append("</tbody></table>");
    }
}, "JSON");

这是用户点击“提升/降级”按钮时的代码。

$('document').ready(function() {

$('.btnPromote').click(function(event) {

    //var index = $(this).attr('value');
    var index = String(event.target.value);
    var email = $('#email' + index).val();
    var username = $('#fullName' + index).val();
    $.post(base_url + 'index.php/resident_detail_controller/promoteUser', {email: email}, function(data) {

        if (data.status === 'Success') {
            notif({
                msg: '<b>You had successfully promoted ' + username + '</b>',
                type: 'success'
            });

            $('#tableContent').empty();
            displayTable();
        } else {
            notif({
                msg: '<b>You fail to promote ' + username + '</b>',
                type: 'error'
            });
        }

    }, 'JSON');
});

$('.btnDemote').click(function(event) {

    //var index = $(this).attr('value');
    var index = String(event.target.value);
    var email = $('#email' + index).val();
    var username = $('#fullName' + index).val();
    $.post(base_url + 'index.php/resident_detail_controller/demoteUser', {email: email}, function(data) {

        if (data.status === 'Success') {
            notif({
                msg: '<b>You had successfully promoted ' + username + '</b>',
                type: 'success'
            });
            $('#tableContent').empty();
            displayTable();
        } else {
            notif({
                msg: '<b>You fail to promote ' + username + '</b>',
                type: 'error'
            });
        }

    }, 'JSON');
}
);

}）;

Answer 1

从.on("click")中删除displayTable()绑定，并用它们替换文档就绪处理程序中的.click()绑定。

您也无需附加'</tbody></table'。将元素追加到DOM时，您要添加整个元素，而不是添加HTML字符串。因此，当您追加<table>时，</table>是该元素的一部分，并且它已经在那里。

我还建议使用$("#tableContent").on("click", ".btnPromote", ...)。您应该从最近的封闭静态元素委派处理程序。委托通过将处理程序绑定到您应用它的元素来工作，并且必须检查目标是否与选择器匹配;这样就不会不必要地运行处理程序。

function displayTable() {

    $('#tableContent').empty();

    $.post(base_url + "index.php/resident_detail_controller/selectAllUser", {}, function(data) {

        $('#tableContent').html(
            "<input type='hidden' id='totalRows' value='" + data.result.length + "' />" +
                "<table class='table table-bordered table-list-search sortable'>" +
                "<thead>" +
                "<tr>" +
                "<th class='text-center' style='font-size: 16px'>#</th>" +
                "<th class='text-center' style='font-size: 16px'>Email</th>" +
                "<th class='text-center' style='font-size: 16px'>Full Name</th>" +
                "<th class='text-center' style='font-size: 16px'>Contact Number</th>" +
                "<th class='text-center' style='font-size: 16px'>Status</th>" +
                "<th class='text-center' style='font-size: 16px'>Action</th>" +
                "</tr>" +
                "</thead>" +
                "<tbody>");

        if (data.status === 'Success') {

            for (var j = 0; j < data.result.length; j++) {

                if (data.result[j].Category === "N") {
                    $('tbody').append(
                        "<tr>" +
                            "<td>" + j + "</td>" +
                            "<td><input type='hidden' id='email" + (j + 1) + "' value='" + data.result[j].Email + "' />" + data.result[j].Email + "</td>" +
                            "<td>" + data.result[j].FullName + "<input type='hidden' id='fullName" + (j + 1) + "' value='" + data.result[j].FullName + "'/></td>" +
                            "<td>" + data.result[j].ContactNo + "</td>" +
                            "<td class='text-center'>" + data.result[j].Category + "</td>" +
                            "<td class='text-center'>" +
                            "<button type='button' id='btnPromote" + (j + 1) + "' class='btn btn-sm btn-primary btnPromote' value='" + (j + 1) + "'>Promote</button>" +
                            "<i class='glyphicon glyphicon-arrow-up'></i>" +
                            "</td>" +
                            "</tr>");
                } else {
                    $('tbody').append(
                        "<tr>" +
                            "<td>" + j + "</td>" +
                            "<td><input type='hidden' id='email" + (j + 1) + "' value='" + data.result[j].Email + "' />" + data.result[j].Email + "</td>" +
                            "<td>" + data.result[j].FullName + "<input type='hidden' id='fullName" + (j + 1) + "' value='" + data.result[j].FullName + "'/></td>" +
                            "<td>" + data.result[j].ContactNo + "</td>" +
                            "<td class='text-center'>" + data.result[j].Category + "</td>" +
                            "<td class='text-center'>" +
                            "<button type='button' id='btnDemote" + (j + 1) + "' class='btn btn-sm btn-info btnDemote' value='" + (j + 1) + "'>Demote</button>" +
                            "<i class='glyphicon glyphicon-arrow-down'></i>" +
                            "</td>" +
                            "</tr>");
                }
            }
        }
    }, "JSON");
}

$(document).ready(function() {
    $("#tableContent").on("click", ".btnPromote", function(event) {

        //var index = $(this).attr('value');
        var index = String(event.target.value);

        var email = $('#email' + index).val();
        var username = $('#fullName' + index).val();
        $.post(base_url + 'index.php/resident_detail_controller/promoteUser', {email: email}, function(data) {

            if (data.status === 'Success') {
                notif({
                    msg: '<b>You had successfully promoted ' + username + '</b>',
                    type: 'success'
                });

                $('#tableContent').empty();
                displayTable();
            } else {
                notif({
                    msg: '<b>You fail to promote ' + username + '</b>',
                    type: 'error'
                });
            }

        }, 'JSON');
    });

    $("#tableContent").on("click", ".btnDemote", function(event) {

        var index = String(event.target.value);

        var email = $('#email' + index).val();
        var username = $('#fullName' + index).val();
        $.post(base_url + 'index.php/resident_detail_controller/demoteUser', {email: email}, function(data) {

            if (data.status === 'Success') {
                notif({
                    msg: '<b>You had successfully promoted ' + username + '</b>',
                    type: 'success'
                });

                $('#tableContent').empty();
                displayTable();
            } else {
                notif({
                    msg: '<b>You fail to promote ' + username + '</b>',
                    type: 'error'
                });
            }

        }, 'JSON');
    });
});

Answer 2

在我看来，您正在使用以下两行添加新的事件处理程序：

$(document).on("click", ".btnDemote", function(event) {

$(document).on("click", ".btnDemote", function(event) {

每次执行此操作。随着时间的推移，这些会堆积起来，每次点击都会比事件处理程序多次调用，导致你为每次点击（N不断增长）进行N ajax调用。

因为它们附加到文档对象，所以这些事件处理程序应该在初始化时设置为ONCE，并且永远不会再次安装。

AJAX响应不断增加而没有循环问题

2 个答案: