使用jquery one（）函数作为hack来防止多次点击事件被触发

Question

我遇到这个奇怪的问题，切换按钮的可见性似乎会影响在该按钮上调用click事件的次数。

如果我使用：$('button').on('click'...)，要点击按钮，只需点击一次，只要点击它之前我就完成了整页加载。相反，我通过AJAX加载包含按钮的页面片段然后单击按钮，on()函数会触发多个单击事件，每次我以这种方式加载页面时都会添加一个事件。

我可以使用$('button').one('click', ...限制点击这些多次点击但是我想知道这是不是太糟糕了，并且最好修复导致多次点击事件发生的原因

在切换可见性之前是否遇到过这个问题 - / + AJAX页面加载会影响点击处理程序触发多少点击事件？

感谢，

添

Answer 1

我想它根本不是hack-ish因为jQuery Docs for One()的第一行描述了这个函数的目的。

  

将处理程序附加到元素的事件。 执行处理程序   每个元素最多一次。

这很容易说它可以防止多次引发事件。

此函数的 内部工作原理 也与@mgraph中提到的相同，它在文档中提到：

  

此方法的第一种形式与.bind（）相同，除了   处理程序在第一次调用后未绑定。第二种形式，   在jQuery 1.7中引入，与.on（）相同，除了   第一次事件发生后，处理程序被删除   委托元素，选择器是否与任何东西匹配。

更详细一点 -

此方法通常binds an event使用.bind() / .on()处理程序，并且一旦事件发生一次，unbinds the event使用.unbind() / .off()

Answer 2

如果您通过AJAX加载元素，则需要使用.on（）的绑定属性将其绑定到页面加载时存在的元素。例如，$("body").on("click", "p", ...不仅会在页面加载时，还会在任何AJAX调用之后将click元素绑定到p标记。如果您只是执行$("p").on("click", ...，则仅在页面加载时将click事件绑定到p个元素。因此，在第一个示例中，您选择要绑定到的元素的父元素（希望比主体更具体），然后在调用.on（）中指定元素。因此，在您的情况下，您可以尝试$('body').on('click','button', ...)。

哦，作为旁注，从jQuery 1.7开始，.on（）和.off（）方法首选在.bind（）和.unbind（）上的元素上附加和删除事件处理程序。