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

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...

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.

Update:

Thanks for the suggestions...

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");

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/

For example:

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

});

Doesn't work.

Community
  • 1
  • 1
Verdi Erel Ergün
  • 1,021
  • 2
  • 12
  • 20
  • Have you read the documentation? – Ram Oct 18 '12 at 06:21
  • Yes, I've read the documentation. Apparently if you specify a receiver as the second parameter the changes are dynamic. However, with $(this).parent it doesn't work. http://api.jquery.com/on/ – Verdi Erel Ergün Oct 18 '12 at 06:24
  • 1
    What are you trying to achieve? From which element, event should be delegated? – Ram Oct 18 '12 at 06:26

2 Answers2

1

.on() (and the older .live()) work by listening for bubbled events originated from their children. You can happily add/remove child elements, knowing the the parent will still be listening.

With that in mind, bind .on() to a parent element that will not be changed. You can go as high as binding it to document.

$(".highest-level-container").on('hover', '.hovertip', function() {
    console.log($(this).parent());
});
Matt Stone
  • 3,705
  • 4
  • 23
  • 40
  • Thanks Matt, I'm not trying to get a class named .parent, I'm trying to get the parent element of the hovertip class. – Verdi Erel Ergün Oct 18 '12 at 06:23
  • Sure. The concept still remains that you should bind .on() to the closest possible parent that will contain all of the .hovertip elements. – Matt Stone Oct 18 '12 at 06:26
1

Your mistake is that this in the selector (2nd) parameter doesn't refer to .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');
});

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'); }); is working, unfortunately once the page refreshes through AJAX it stops working.

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

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

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

Thomas
  • 8,426
  • 1
  • 25
  • 49