Question

我正在做一个ajax请求来更改我的一个div中的data-status。我不知道为什么，当我点击其中一个按钮时它会多次执行。

这是我的代码：

$(document).on("click", ".check", function(){
    var status = $(this).closest("td").data("status");
    var avatarID = $(this).closest("td").data("id");

    if (status === 1) {
        $("#alert-unpublish-status").addClass('is-visible');
        $("#alert-unpublish-status").on("click", function(e){
            e.preventDefault();
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        });
    }
})

有什么问题？我该如何改进呢？

谢谢！

Answer 1

您已在另一个点击处理程序中添加了点击处理程序，因此每次点击NSImageView元素时，都会添加更多处理程序。尝试创建变量以跟踪是否已添加处理程序。像这样：

.check

Answer 2

从#alert-unpublish-status的点击处理程序中取出.check的点击绑定。您可以使用公共范围中的变量来传达最后点击的.check。

$(document).ready(function() {
    var status, avatarID;

    $("#alert-unpublish-status").on("click", function(e){
        e.preventDefault();
        if (status == 1) {
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        }
    });

    $(document).on("click", ".check", function(){
        status = $(this).closest("td").data("status");
        avatarID = $(this).closest("td").data("id");
        $("#alert-unpublish-status").toggleClass('is-visible', status == 1);
    });
});

为什么我的ajax请求多次执行？

2 个答案: