javascript - 带有 .parent() 和动态选择器的 jQuery .on()

Question

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

我想让类似上面的东西像 .live() 一样工作，以便它捕获 DOM 的动态更改。

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

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

但是好像不行...

注意 – 这是 jQuery Live traversal parent() selector 的延续它使用 .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

您的错误是选择器(第二个)参数中的 this 没有引用 .hovertip。

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

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

如果 parent 都有相同的类(class)，您应该使用@Matt Stone 的解决方案。

更新:我刚刚在另一篇文章中看到您的回答:

$(".hovertip").parent().on('hover', function() { alert('yay'); }); is working, unfortunately once the page refreshes through AJAX it stops working.

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

我建议您为所有应该获取悬停事件处理程序的元素(.hovertip 的所有父元素)提供一个类。那么就简单了

示例: $('body').on('hover', '.hovertip', function(){});