带有.parent()和动态选择器的jQuery .on() [英] jQuery .on() with a .parent() and dynamic selector

问题描述

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

我想像.live()这样获得类似上面的内容，以便它捕获对DOM的动态更改.

I'd like to get something like the above working like .live() so that it catches dynamic changes to the DOM.

我尝试过类似的事情...

I tried something like this...

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

但这似乎不起作用...

But it doesn't seem to work...

注意–这是 jQuery Live遍历parent()选择器的延续使用.parent()添加了.on()，但动态DOM更改问题仍未解决.

Note – this is a continuation of jQuery Live traversal parent() selector which addresessed .on() with .parent() but the dynamic DOM change issue isn't resolved.

更新:

感谢您的建议...

在对函数执行操作时，我仍然无法使此代码实时运行，并且在DOM更改时使它们像.live一样工作.例如...(当DOM更改时，这不起作用)...

I'm having trouble still getting this code to work live when performing actions on the function and have them work like .live when the DOM changes. For example... (this doesn't work when the DOM changes)...

$(".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/

I think the issue is if I were to implement a suggested solution, I'd still need $(this).parent() before the main selector to be a callback and it doesn't seem .parent() supports callbacks: 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");
 ...

});

不起作用.

推荐答案

您的错误是选择器(2nd)参数中的this没有引用.hovertip.

Your mistake is that this in the selector (2nd) parameter doesn't refer to .hovertip.

如果您想在.hovertip元素的每个父级中捕获事件，则可以这样操作:

If you want to catch the event in each parent of a .hovertip element you could do it like this:

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

如果父母的班级都相同，则应使用@Matt Stone的解决方案.

If the parents all have the same class you should use @Matt Stone's solution.

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

Update: I just saw your answer on the other post:

$(.hovertip").parent().on('hover'，function(){alert('yay');});正常，遗憾的是，一旦页面通过AJAX刷新，它将停止工作.

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

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

That's because it stops working when the element with the event handler attached (in your case the parents of .hovertip elements) gets replaced.

我建议您为应该获取悬停事件处理程序的所有元素(.hovertip的所有父元素)提供一个类.那很容易

I suggest you give a class to all elements that should get the hover event handler (all parent elements of .hovertip). Then it's easy

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

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

这篇关于带有.parent()和动态选择器的jQuery .on()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！