如何防止事件处理程序堆叠使用jQuery上的文档选择器触发的单击事件

Question

我正在做一个项目，在这个项目中，我使用AJAX加载不同的HTML代码片段，以便在每个HTML片段中定位动态按钮。我必须在文档$(document).click();上触发单击事件，因为如果我尝试直接指向它们，由于按钮是动态的，并且它们会随着每个load()的变化而不断变化，所以我的Javascript没有得到任何响应。因此，当jQuery第一次绑定单击事件时，此按钮将被删除并再次加载。JQuery似乎不会使用直接选择器重新绑定事件。

问题是，每次我在子选择器上触发事件click时，它都不会清除之前绑定的click事件。如何清除这些事件以停止在具有相同类或id的不同按钮上堆叠相同的事件

    $(document).on('click', '#saveBtn', function () {
        saveQuestion(id);
    });

Answer 1

我找到了答案：

$(document).off('click', '#saveBtn').on('click', '#saveBtn', function () {
    saveQuestion(id);
});

理解这一点的关键是你用off解除事件绑定，但你不应该在没有参数设置的情况下调用，因为它会杀死文档的单击功能，所以你将事件和子选择器传递给off函数以防止灾难，希望这对任何发现自己遇到这种麻烦的人都有帮助。

Answer 2

您也可以使用unbind("click")。如果您只希望解除绑定到click的单个函数的绑定，您也可以命名该事件。假设你做了两个绑定，并且只想删除一个，你可以这样做。

$(document).on('click.somename1', '#saveBtn', function (/*do something*/) {});
$(document).on('click.somename2', '#saveBtn', function (/*do something else*/) {});
$(document).unbind('click.somename1', '#saveBtn');