如何防止我的 .done 处理程序被多次调用

Question

>我有这个JQuery表达式，我按下一个按钮，从服务器获取一些HTML，然后将其附加到文档中的DOM节点：

<script type="text/javascript">
        $(document).ready(function () {
            $(".addbutton").click(function () {
                var addbuttonNode = $(this);
                $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' })
                    .done(function (data) {
                        $(addbuttonNode).next().next().append(data);   //find better way of doing this  
                    });
            });
        });
    </script>

我的网站上有多个".addButton"按钮。我遇到的问题是，在多次单击按钮后，我的 .done 处理程序被多次调用。

我的猜测是我有一个正在执行的事件处理程序列表，我不明白在哪里/为什么这样做或我如何防止它发生。

Answer 1

问题不在于你做的请求比一次多做，而是在它完成后调用完成。 您可以将状态保留在数据对象中：

$(document).ready(function () {
    var posting = false;
    $(".addbutton").data("done", false).click(function () {
        var addbuttonNode = $(this);
        if (!addbuttonNode.data("done")) {
            addbuttonNode.data("done", true);
            $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' })
                .done(function (data) {
                    $(addbuttonNode).next().next().append(data);   
                });
        }
    });
});

Answer 2

我会执行以下操作：

$(".addbutton").click(function () {
            var addbuttonNode = $(this);
            addbuttonNode.attr('disabled',true);
            $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' })
                .done(function (data) {
                    $(addbuttonNode).next().next().append(data);   //find better way of doing this  
                     addbuttonNode.attr('disabled',false);
                });
        });

Answer 3

您可以检查它是否有任何待处理的请求：

$(document).ready(function () {
     $(".addbutton").click(function () {
         // if any request pending, return {undefined}
         if ($.active) return;
         var addbuttonNode = $(this);
         $.post("/InteractiveApplications/GetQuizAnswer", {
             id: '@guid'
         }).done(function (data) {
             // instead of .next().next()
             $(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this  
             // or .parent().find('selector')
         });
     });
 });

如果您希望每个按钮只能单击一次，请使用 jQuery .one()方法：

$(document).ready(function () {
     $(".addbutton").one('click', function () {
         var addbuttonNode = $(this);
         $.post("/InteractiveApplications/GetQuizAnswer", {
             id: '@guid'
         }).done(function (data) {
             // instead of .next().next()
             $(addbuttonNode).nextAll('selector').first().append(data); //find better way of doing this  
             // or .parent().find('selector')
         });
     });
 });

Answer 4

尝试使用 bind 和取消绑定函数进行事件处理。然后，您可以在单击函数执行一次后解绑它。

<script type="text/javascript">
    $(document).ready(function () {
        $(".addbutton").bind('click',function () {
            var addbuttonNode = $(this);
            $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }).done(function (data) {
                addbuttonNode.next().next().append(data);
            });
            addbuttonNode.unbind('click');
        });
    });
</script>

另一种几乎相同的方法，我认为这应该更好：

<script type="text/javascript">
    $(document).ready(function () {
        $(".addbutton").each(function(){
            $(this).bind('click',function () {
                $.post("/InteractiveApplications/GetQuizAnswer", { id: '@guid' }).done(function (data) {
                    addbuttonNode.next().next().append(data);
                });
                $(this).unbind('click');
            });
        });
    });
</script>

我还没有尝试过，但它应该有效，试试吧！ :)

您还可以设置类或数据属性来检查是否已单击按钮。然后你可以退出脚本，比如if（$（this）.hasClass（'clicked'）） { return; }或其他什么...