为什么jQuery单击事件会多次触发答案

【问题标题】：why is jQuery click event firing multiple times为什么jQuery单击事件会多次触发
【发布时间】：2014-03-04 19:17:48
【问题描述】：

我这里有这个示例代码 http://jsfiddle.net/DBBUL/10/

    $(document).ready(function ($) {

    $('.creategene').click(function () {

        $('#confirmCreateModal').modal();

        $('#confirmCreateYes').click(function () {
            $('#confirmCreateModal').modal('hide');

            var test = "123";
            alert(test);
            console.log(test);             
        });
    });
});

如果您单击创建按钮 3 次，并且每次在确认中单击“是”，则每次单击都会触发多次警报，而不仅仅是一次。

如果您单击创建按钮 3 次，每次单击“否”，第 4 次单击“是”，则每次单击都会触发警报，而不仅仅是一次。

这种行为对我来说似乎很奇怪，因为我希望每次点击都会触发一次警报。我必须使用 .unbind() 还是有更好的解决方案？

谁能告诉我为什么会发生这种情况以及如何解决它？

谢谢

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

因为您要多次绑定它。单击事件中的单击事件意味着每次单击时，都会在先前绑定的事件之上绑定一个新的单击事件。不要在点击事件中绑定点击事件，除非点击事件创建了元素。也不需要一遍又一遍地重新初始化模态。

$(document).ready(function ($) {

    $('#confirmCreateModal').modal({show: false});

    $('#confirmCreateYes').click(function () {
        $('#confirmCreateModal').modal('hide');

        var test = "123";
        alert(test);
        console.log(test);             
    });

    $('.creategene').click(function () {

        $('#confirmCreateModal').modal('show');

    });
});

Demo

【讨论】：

如果主点击事件（.creategene）发生在knockoutjs点击绑定self.createGene = function（）{}
我会使用数据属性而不是 javascript 来完成此操作，然后绑定到关闭事件。
好吧，不是关闭事件，而只是“是”按钮。没有真正需要初始化模式或点击事件来打开它。

【解决方案2】：

像这样修改代码

$(document).ready(function ($) {

    $('.creategene').click(function () {

        $('#confirmCreateModal').modal();


    });
    $('#confirmCreateYes').click(function () {
            $('#confirmCreateModal').modal('hide');

            var test = "123";
            alert(test);
            console.log(test);             
        });
});

fiddle

您不必在每次按钮点击时绑定$('#confirmCreateYes').click。

【讨论】：

【解决方案3】：

你也可以试试这个-

$("#confirmCreateYes").unbind().click(function() {
//Stuff
});

【讨论】：

单独的代码块并不能提供好的答案。请添加解释（为什么它解决了问题，错误在哪里等等......）

【解决方案4】：

将此添加到您的代码中：

$( "#confirmCreateYes").unbind( "click" );

像这样：

$(document).ready(function ($) {

$('.creategene').click(function () {

    $('#confirmCreateModal').modal();

    $('#confirmCreateYes').click(function () {
        $('#confirmCreateModal').modal('hide');

        var test = "123";
        alert(test);
        console.log(test);
        $( "#confirmCreateYes").unbind( "click" );
    });
});

});

它将取消绑定事件，因此它不会绑定在前一个事件之上。这允许事件仅在原始点击事件中触发。

这不是一个好方法。它将解除绑定到元素的所有点击事件。我将把它留在这里用于学习目的。

【讨论】：

这行不通。如果选择了这种方法，则取消绑定需要在绑定之前，而不是在函数实现内部（？）。但由于多种原因，这仍然是一种糟糕的方法，首先是您盲目地解除绑定到该项目的所有点击事件，不一定只是有问题的事件。
不，将它放在@kylealonius 放置它的位置比其他任何地方都更有意义。它将尽早解除绑定。不过，将其进一步减少到使用.one() 而不是.click() 会更有意义，这样您甚至不必自己解除绑定。但是你明白了，为什么要解开它呢？无论如何，它只能在模态可见时触发。
罗伯特关于取消绑定所有点击事件是正确的。我没有想到这一点。我试图保留原始设计。但是由于 create yes 按钮有一个 ID，所以其他方法要好得多，因为 click 事件不会为任何其他元素触发。