3

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

更新：使用 on 处理程序让它工作，感谢大家的帮助！

4

5 回答 5

3

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

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

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

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

想象一下，您的 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’的事件，当这种情况发生时，做一些事情。”

于 2012-05-19T07:41:07.257 回答
2

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

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

您应该on()为此使用：

$('#nonDynamicElement').on('mouseenter', '#dynamicElement', function() {
    //do stuff
});
于 2012-05-19T07:35:50.113 回答
0

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

如评论中所述，请改用on () 。

于 2012-05-19T07:28:51.710 回答
0

从 jQuery 1.7+ 开始，你应该使用 on() 来处理旧版本的 jquery，你可以使用 live()

于 2012-05-19T07:40:12.633 回答
-1

如果您在 AJAX 脚本中使用 jQuery，请务必jQuery使用$.

jQuery( selector [, context] )

代替

$( selector [, context] )
于 2012-05-19T07:31:11.733 回答