为什么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

因为你多次绑定它.单击事件中的单击事件意味着每次单击时,新的单击事件将绑定在先前绑定的事件之上.除非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');

    });
});

演示