带有.parent（）和动态选择器的jQuery .on（）

Question

$(".hovertip").parent().on('hover', function() {
  alert('yay');
});

我希望像上面这样的工作像.live（），以便它捕获DOM的动态更改。

我试过这样的事......

$(".hovertip").on('hover', $(this).parent(), function() {
  alert('yay');
});

但它似乎不起作用......

注意 - 这是jQuery Live遍历parent（）选择器的延续，它使用.parent（）添加.on（），但动态DOM更改问题未得到解决。

---

更新：

谢谢你的建议......

在执行函数操作时，我仍然无法使这段代码正常工作，并且当DOM更改时让它们像.live一样工作。 例如......（当DOM发生变化时，这不起作用）......

$(".hovertip").parent().on('mouseenter', function() {
    var hovertipParentHeight = $(this).outerHeight();
    $(this).find(".hovertip").css("top", (hovertipParentHeight-hovertipHeight)/2 + "px");

我认为问题是如果我要实现一个建议的解决方案，我仍然需要$（this）.parent（）在主选择器之前作为回调并且它似乎不是.parent（）支持回调： http： //api.jquery.com/parent/

例如：

$('.hovertip').on('hover', function(){
  $(this).parent(function() {
  var hovertipParentHeight = $(this).outerHeight();
  $(this).find(".hovertip").css("top", (hovertipParentHeight-hovertipHeight)/2 + "px");
 ...

}）;

不行。

Answer 1

.on（） （以及较旧的.live（））通过侦听源自其子节点的冒泡事件来工作。 您可以愉快地添加/删除子元素，知道父级仍在监听。

考虑到这一点，将.on（）绑定到不会更改的父元素。 您可以将其绑定到document 。

$(".highest-level-container").on('hover', '.hovertip', function() {
    console.log($(this).parent());
});

Answer 2

你的错误是， this在选择（二）参数并不是指.hovertip。

如果你想在.hovertip元素的每个父元素中捕获事件，你可以这样做：

$('.hovertip').parent().on('hover', '.hovertip', function(){
  alert('yay');
});

如果父母都有同一个班级，你应该使用@Matt Stone的解决方案。

更新：我刚刚在另一篇文章中看到了你的回答：

$（“。hovertip”）。parent（）。on（'hover'，function（）{alert（'yay'）;}）; 工作，不幸的是一旦页面刷新通过AJAX它停止工作。

那是因为当附加了事件处理程序的元素（在您的情况下是.hovertip元素的父元素）被替换时，它会停止工作。

我建议你给所有应该获得悬停事件处理程序的元素一个类（.hovertip的所有父元素）。 那很容易

示例：$（'body'）。on（'hover'，'。hovertip'，function（）{}）;