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 () {
     $(".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 2

问题不是你做的请求不止一次而不是在完成后调用完成。你可以将状态保存在数据对象中::

$(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 3

我会做以下事情：

$(".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 4

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

<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;或者什么......

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

4 个答案: