Question

我这里有这个示例代码 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（）还是有更好的解决方案？

有人可以告诉我为什么会这样，以及如何解决它？

由于

Answer 1

因为你多次绑定它。单击事件中的单击事件意味着每次单击时，新的单击事件将绑定在先前绑定的事件之上。除非click事件创建元素，否则不要在click事件中绑定click事件。也没有必要一遍又一遍地重新初始化模态。

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

Answer 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。

Answer 3

将此添加到您的代码中：

$( "#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" );
    });
});

}）;

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

这不是一个好方法。它将取消绑定附加到元素的所有单击事件。我会把它留在这里用于学习目的。

Answer 4

你也可以试试这个 -

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

为什么jQuery点击事件多次触发

4 个答案: