javascript - 为什么 jQuery 单击事件会多次触发

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

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

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