在两个函数中使用时在文档就绪冲突中取消绑定 jquery答案

【问题标题】：Unbind jquery in document ready conflict when used in two functions在两个函数中使用时在文档就绪冲突中取消绑定 jquery
【发布时间】：2017-10-15 15:03:20
【问题描述】：

我有两个页面，其中包含帖子和评论。回复按钮的功能类似，都在文档就绪事件中使用取消绑定功能。不知何故，即使他们正在访问不同的类，也只有一个函数可以工作。当一个被注释掉时，它们都可以工作。我感谢任何帮助和想法。谢谢！

//Replies Posts
$(document).ready(function () {
   $(document).unbind().on("click", ".btnReplySubmit", function() {
        if (!$.trim($(this).closest(".myRepliesForm").find(".textareaReply").val())) {
            alert("Empty Content");
        }
        else {
            $.ajax({
                url: "/Replies/Create/",
                type: "post",
                cache: false,
                data: $(this).closest(".myRepliesForm").serialize(),
                success: function() {
                    $(".reloadComments").load(location.href + " .reloadComments");
                    $(".reloadComments").show("slow");
                }
            });
            $(this).closest(".myRepliesForm").find(".textareaReply").val("");
        }
        return false;
    });
});

//Reply Review
$(document).ready(function () {
    $(document).unbind().on("click", ".btnReplySubmitReview", function () {
        if (!$.trim($(this).closest(".myRepliesFormReview").find(".textareaReplyReview").val())) {
            alert("Empty Content");
        }
        else {
            $.ajax({
                url: "/ReviewReplies/Create/",
                type: "post",
                cache: false,
                data: $(this).closest(".myRepliesFormReview").serialize(),
                success: function () {
                    $(".reloadCommentsReview").load(location.href + " .reloadCommentsReview");
                    $(".reloadCommentsReview").show("slow");
                }
            });
            $(this).closest(".myRepliesFormReview").find(".textareaReplyReview").val("");
        }
        return false;
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您在两个事件处理程序上都使用unbind，其中一个函数将不可避免地被解除绑定。您也不需要两个 ready 调用，因为一个就足够了，最后，您可以链接您的事件处理程序绑定，如下所示：

$(document).ready(function () {
   $(document).unbind()
   .on("click", ".btnReplySubmit", function() {
        if (!$.trim($(this).closest(".myRepliesForm").find(".textareaReply").val())) {
            // ...
        }
        else {
            // ...
        }
        return false;
    })
    .on("click", ".btnReplySubmitReview", function () {
        if (!$.trim($(this).closest(".myRepliesFormReview").find(".textareaReplyReview").val())) {
            // ...
        }
        else {
            // ...
        }
        return false;
    });
});

【讨论】：

我很高兴，很高兴我能提供帮助。

【解决方案2】：

因为取消绑定会清除所有之前的绑定。

但是.. 为什么要在文档上使用绑定/取消绑定使事情复杂化，您可以只在两个按钮上做一个点击监听器：

$(document).ready(function () {
  $('.btnReplySubmit').click(function(){
    // alert(1);
  });
  $('.btnReplySubmitReview').click(function(){
    // alert(2);
  })
});

【讨论】：

我刚刚尝试过这种方式，但功能只是第一次工作。

【解决方案3】：

我在这里看到的主要问题是您正在解除绑定到$(document) 的事件。另外，根据 jquery 的 api，你不应该再使用 unbind，因为它已经被弃用了。

相反，您应该像这样构建代码

$(document).ready(function() {
  $('. btnReplySubmit').click(function() {
    // your code here
  })

  $('. btnReplySubmitReview').click(function() {
    // your code here
  })
})

这使您的事件声明更加清晰易读

【讨论】：

【解决方案4】：

所有答案都是正确的。我可以补充一点，.on(events [, selector] [,data], handler) 方法中的选择器是 事件触发器，但在您的情况下，事件绑定到文档。

【讨论】：