Question

我的应用程序中有一个相当标准的星级投票功能，它使用jQuery的悬停事件。一旦最初加载DOM（HTML请求），星级投票逻辑的部分用于与页面的其余部分一起呈现。但是，我想移动部分，以便它没有加载页面，但可以在用户需要时加载。我做了一个典型的AJAX请求来加载部分，但是当它被渲染时，星星对鼠标悬停等事件没有做出正确的反应。这个问题是因为我是通过AJAX渲染表单还是我的代码中只有一个错误？谢谢你的帮助

更新：使用on处理程序正常工作，感谢所有人的帮助！

Answer 1

您可能正在尝试将事件绑定到DOM中尚不存在的节点。解决此问题的最佳方法是绑定到Ajax请求之前存在的侦听器，该侦听器是正在获取的内容的祖先（有时被错误地称为“父”，它只是祖先的一个级别）。例如，在页面本身中给出此标记：

<div id="ajaxContainer">
  <!-- content will be periodically replaced with Ajax -->
</div>

“ajaxContainer”是你要取的任何东西的祖先。然后，您需要使用适当的方法绑定侦听器。在过去，您可以使用live()，但它已被弃用，无论如何都不是那么有效。然后建议delegate()，解决了效率问题。现在它是on()的委托侦听器语法，其性能与delegate()大致相同，但语法不同。

如果您使用的是jQuery 1.7 +，请使用.on()。

想象一下，你的Ajax函数会检索包含你的星系统鼠标悬停的页面的一部分，该部分位于一系列被归类为“星星”的div中。语法可能如下所示：

$(document).ready(function() {
  $('#ajaxContainer').on('mouseenter', '.stars', function() {
    $this = $(this); // cache this specific instance of a stars div as a jQuery object
    // do stuff with $this
  });
});

这说“开始在ajaxContainer中搜索匹配'鼠标进入星际div'的事件，当发生这种情况时，做一些事情。”

Answer 2

使用Ajax创建的元素不会响应事件处理程序，因为事件处理程序仅处理初始化时DOM中存在的元素。

您需要委托并监听DOM中存在的元素上的事件，并捕获动态元素的冒泡。

您应该使用on()：

$('#nonDynamicElement').on('mouseenter', '#dynamicElement', function() {
    //do stuff
});

Answer 3

jQuery有一个名为live的函数，它允许您将事件处理程序应用于尚未创建的对象。

如评论中所述，请改用on（）。

Answer 4

从jQuery 1.7+起，你应该使用on（）对于旧版本的jquery，您可以使用live（）

Answer 5

如果您在AJAX脚本中使用jQuery，请务必使用jQuery而不是$。

jQuery( selector [, context] )

而不是

$( selector [, context] )

当表单通过AJAX呈现时，jQuery代码不适用于表单

5 个答案: