问题标签 [event-delegation]

我正在使用最新的 jQuery，它说.live()已弃用，.on()应该改用。我在将点击事件附加到按钮时遇到问题。我动态修改按钮值，应该能够处理这两种情况

这是演示：jsfiddle

我正在尝试对同一页面上的不同表单使用事件委托。但是，我在尝试提交表单时遇到了一个有趣的问题。

我尝试在一个表单（用于提交按钮）上“单击”，完全清楚事件委托固有地在整个表单上设置“单击”。

然而，问题来自这样一个事实，即“点击”事件实际上是在整个页面上设置的，而不仅仅是表单或按钮元素。因此，无论我在哪里点击页面，都会触发表单的“点击”事件。所有浏览器都在发生这种情况。

'change' 事件也发生了同样的事情。当我在表单上设置“更改”事件时，表单的子字段和特定表单节点之外的其他字段都会触发它。

所以虽然我知道之前有人问过关于事件委托的问题，但他们并没有真正回答这个问题。这甚至是一个问题吗？也许这就是事件委托的工作方式？但是如果是这样的话，那么为整个文档触发事件不是浪费内存吗？解决办法是什么？

此外，是否有一种跨浏览器的方式来阻止纯 Javascript 中的传播？我发现的最好的是在Quirksmode.org上：

我知道我可以在触发时按类型过滤事件，但这是唯一能做的吗？请帮助我理解这一点！

编辑：

具体问题是，将事件委托给表单以处理其特定字段上的事件是否会/也可以触发文档其余部分的事件？如果是这样，如何处理？如果这不是事件委托的预期行为，那么可能是什么原因造成的？

我的脑子里糊涂了。谁能告诉我为什么这适用于'mouseenter'而不适用于'click'？

http://jsfiddle.net/jxUGw/3/

我想在鼠标悬停时给每根头发一个反弹动画。动画部分是在第一根头发上完成的，但我不想给每一个头发图像都提供事件。所以这是我的问题，我在我的 javascript 代码中使用构造函数。是否有可能在我的原型中创建一个方法并创建它的实例？所以基本上我不想触发 10 个事件或 10 个 addEventListeners，我想要一个聪明的方法来解决这个问题。我如何完成我的任务，因为每根头发都应该只在鼠标悬停时反弹

我的代码：HTML：

Javascript：

我想从正文中隐藏附加的 div。我正在使用.onjQuery 1.9.1，但它不起作用。

我正在创建一个动态输入并向其应用一个类，但它不起作用。
我的课：

我的代码：

应用于其他元素的同一类工作正常。任何帮助

在使用事件委托的方法时，我们将事件处理程序设置在更高级别的元素（父或祖父）上，但这在 iPad 的 Safari 上存在问题：如果父元素有点击处理程序，当用户触摸该元素内的任何内容时，整个区域将变灰（在 iOS 5.1 上）或闪烁（在 iOS 6 上）。

因此，如果父级或祖父级是 300 x 300 像素，而链接只是一个单词，比如 60 x 20 像素，那么当用户触摸父级内部的任何位置（链接除外）时，整个 300 x 300 区域将灰色或闪烁，具体取决于 iOS 版本。

这是一个示例： http: //jsfiddle.net/2K3TB/30/ ，它可以在物理设备或 iOS 模拟器上的带有 iOS 5.1 或 6 的 iPad Safari 上运行。

并且我尝试了Apple 文档中列出的所有事件，并且touchstart可以监听，并且事件处理程序可以执行，preventDefault()因此不会出现灰显或闪烁。示例： http: //jsfiddle.net/2K3TB/31/ 但是现在，将在文档顶部添加“ha”的链接不起作用。为了使它工作，我必须在链接上设置一个touchstart处理程序以使链接工作：http: //jsfiddle.net/2K3TB/33/

这是解决灰显或闪烁问题的正确方法吗？还有其他方法吗？此方法存在问题，在此区域内，可能存在动态内容，例如链接、按钮、复选框、单选、选择或任何其他可能<div>具有事件处理程序的内容，因此我无法设置touchstart处理程序每个不可预知的元素。我也许可以使用类似的东西：

就像在http://jsfiddle.net/2K3TB/35/ 但是我必须检查所有<a>, <input>, <button>, <select>, 或任何可能绑定了事件处理程序的元素。所以这可能不是一个好的解决方案。有没有解决这个灰色或闪烁问题的好方法？

更新：查理在下面的回答效果很好，但也有一个问题：一旦我们设置了容器的 css 样式，<a>或者任何其他可点击元素也从该样式继承，并且也变得透明。所以我不得不做类似的事情：

也就是说，我必须先保存点击突出显示颜色，然后将容器设置为透明，然后将<a>下面设置回使用该颜色。它适用于<a>，我想知道其他元素怎么样，以及我是否应该使用它$("#the-container *")来恢复它们，这可能效率低下。或者如果有更好的方法来处理这个问题。

顺便说一句，这是webkit CSS 样式的文档。我试图寻找一种不会被后代继承但似乎没有的类似风格。

更新2：似乎如果我们只是将孩子们设置回那种风格，那么就可以了，因为我们只向下一层，让后代从他们那里继承：

感谢您的任何帮助。这个网站是一个很好的资源。

我的问题：当在我正在处理的网站上打开菜单时，我还会在（主体）前面添加一个 div 叠加层并给它一个类，该类应该允许它可以单击以关闭菜单并自行删除。这样用户就可以点击菜单外的任何地方来关闭它，而不是要求他们点击“关闭”按钮。这听起来很简单，但我无法让它发挥作用。

我知道存在“绑定”问题，因为我正在向 DOM 添加内容，所以我使用 .on() 而不是 .click()，认为这将允许我的触发事件绑定到新创建的 div。我也尝试过 .bind()，但老实说，我现在只是在猜测代码，因为我不明白它们之间的区别。我不想为看起来如此简单的事情使用插件，所以我希望我犯的一些简单错误对于那些有更多经验的人来说会立即显而易见，即你们所有人。;) 这是我的 jQuery 函数。除了单击“#the-overlay”没有任何作用之外，一切都按我的意愿进行。

如果我的问题以某种方式违反规则，请原谅。我确实在寻找避免重复的答案，但我能找到的所有答案都表明我的问题可以用 .on() 或已弃用的 .live() 来解决。

谢谢你。

我正在使用.on()带有选择器的 jQuery 来委托给一组过滤的后代，如下所示：

在这种情况下，将 clickHandler 函数绑定到具有“data-click”属性（具有任何值）的任何后代的 click 事件。

如果selectedElement本身有“data-click”属性，则不绑定。我不能改用所选元素的父元素，因为它包含我不想绑定的其他子元素。这种绑定发生在selectedElement作为参数接收的函数内部，所以我不知道它是什么类型的元素或我将使用什么选择器来选择它。我宁愿不必单独绑定选定的元素。

有没有办法将所选元素本身包含在被过滤和绑定的集合中.on？

好的，我刚刚发现了事件委托，点击问题：动态生成的链接未触发点击功能我的问题如下。

UL 通过 jQuery load() 调用加载。

jQuery 的第一部分将通过分页链接加载到上述 UL 中。jquery 的第二部分从您单击的分页链接中获取分页页码，现在是问题：

单击分页链接后，我无法加载更新的页面#accountActivity，这是委托问题还是我正在尝试做的事情是不可能的，分页链接是否无法看到#accountActivity，因为这是初始负载加载到？！

提前感谢所有帮助。