Question

我已经使用这个点击功能来调用某个事件，但是当我点击这个类时，它有时会发射两次，三次以及更多。

请为此代码及其纠正方法提供适当的建议。

 $(".PositiveReaction").unbind("click").click(function () {
        var itemGraphId = this.id;
        itemGraphId = itemGraphId.replace("Like", "");
        $.ajax({
            type: "Post",
            url: "/React/AddReact",
            dataType: "JSON",
            data: { "itemGraphId": itemGraphId, "reactionTypeEnum": "POSITIVE" },
            success: function (data) {
                $.each(data, function (i, item) {
                    $("#CountLike" + item.GraphID).html(item.CountPositiveReactions);
                    $("#CountDisLike" + item.GraphID).html(item.CountNegativeReactions);
                });
            },
            error: function (req, status, error) {}
        });
  });

Answer 1

使用附加到不变的祖先的委托事件。然后你不需要打开和关闭它（当然取决于你的app逻辑）：

 $(document).on("click", ".PositiveReaction", function () {

它适用于当前和未来的匹配元素。

委托事件通过侦听冒泡到不变的祖先的事件来工作。如果没有方便/接近的话，document是默认值。它然后将jQuery选择器应用于bubble链中的元素。然后为导致事件的任何匹配元素调用函数。这意味着元素在事件时间之前不必匹配，而不是在创建事件处理程序时匹配。

注意：不要将'body'用于委派事件，因为样式可能会导致正文高度为0，并且可能不会发生事件！始终使用document作为后备。

如果您确实需要关闭委派的处理程序，请在事件名称上使用命名空间：

启用：

$(document).on("click.myapp", ".PositiveReaction", function () {

关闭：

$(document).off("click.myapp");

Answer 2

最好的方法是按以下方式重写方法

$(document).on("click",".PositiveReaction", function(){ ajaxFunction();})
$(document).off("click",".PositiveReaction",function(){ ajaxFunction();})

function ajaxFunction(){
 //Do stuff here
}

点击功能有时两次，三次以及更多

2 个答案: