Question

我一直在使用jquery的.live来将事件处理程序绑定到动态生成的元素。

随着即将发布的jQuery 1.7，我对即将被弃用的.delegate函数进行了一些阅读，并且它在1.7 .on命令中取代了它们，它完全取代了.live并且应该更快。

无论如何，我已经开始在我的代码中转换一些我的.live用法了，虽然这似乎适用于'click'事件但我无法获得.delegate或.on来处理任何hover / moouseenter事件。

有人可以描述这段代码有什么问题并告诉我应该做些什么吗？

$('body').delegate('.project_open', 'mouseenter', function() {

    $(this).addClass("hovered");

  });

现在.project_open的容器是动态生成的，这就是为什么我使用'body'作为不改变的处理程序的原因。如果我使用新的.on函数，则完全相同。

如果我使用.live它完美无缺。我出错的任何想法？感谢。

Answer 1

如果.project_open位于另一个控件（如ul或div）或其他控件中，则无效。

在这种情况下会起作用：

<body>
  <div class=".project_open">
  </div>
</body>
$('body').delegate('.project_open', 'mouseenter', function() {

    $(this).addClass("hovered");

  });

在这种情况下不起作用，所以如果你附加额外的容器。

<body>
  <div>
      <div class=".project_open">
      </div>
  </div>
</body>
$('body').delegate('.project_open', 'mouseenter', function() {

    $(this).addClass("hovered");

  });

Answer 2

只需在类选择器上使用'on'：

$('.project_open').on('mouseenter', function() {
    $(this).addClass("hovered");
});

理论代表：

为所有匹配的元素附加处理程序到一个或多个事件选择器，现在或将来，基于一组特定的根元素。从jQuery 1.7开始，.delegate（）已被取代 .on（）方法。然而，对于早期版本，它仍然是最多的有效的方法来使用事件委托。有关活动的更多信息绑定和委托是在.on（）方法中。

理论直播：

描述：为与之匹配的所有元素附加事件处理程序现在和未来的当前选择器。从jQuery 1.7开始，.live（）方法已弃用。使用.on（）附加事件处理程序。用户旧版本的jQuery应优先使用.delegate（）。生活（）。此方法提供了附加委托事件的方法处理页面的文档元素，简化了使用内容动态添加到页面时的事件处理程序。见讨论.on（）方法中的直接事件与委托事件更多信息。根据它重写.live（）方法接班人很简单。

检查一个有效的例子：http://jsfiddle.net/KeesCBakker/hgGec

Jquery .delegate在悬停时似乎对我不起作用

2 个答案: