Jquery Live Traversal Parent() Selector

$('.hovertip').parent().live('hover', function() { ... The above code doesn't seem to register. This doesn't seem to work either: $('.hovertip').parent().live({ mouseenter:

Solution 1:

Try:

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

Note:.on was introduced in jQuery 1.8.

Working demohttp://jsfiddle.net/pRB8n/Hover over test test - in the demo

If you really want to use .delegate try this please: http://jsfiddle.net/TURBX/2/ - http://api.jquery.com/delegate/

Delegate Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Hope rest fits the needs :)

P.S. - .live is deprecated: for further if you keen - my old post here: :) What's wrong with the jQuery live method?

under category you will see: http://api.jquery.com/live/ "deprecated"

Solution 2:

I would add a comment to Tats_innit's post, but I can't.

As per the documentation on live,

Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.

That's why .parent() does not work.

Solution 3:

Binding to parent

Event delegation (handled by the deprecated live and .delegate, and now by .on/.one) only moves downwards. You can't have an upward event delegation like you seem to want to do here.

That is to say if the parent of ".hovertip" does not exist then clearly ".hovertip" does not exist so you are actually binding to nothing.

If your goal is to bind the event to the parent of ".hovertip" when it appears, then you're SOL since delegation only moves downwards (to descendants).

Your options to handle that would be: * Bind to the parent of .hovertip when it is appended to the DOM. * Know a selector for the parent of .hovertip ahead of time and bind to it immediately, perhaps through delegation.

Delegating to child

If your goal is to have the event fire when .hovertip is hovered, but .hovertip may not be in the DOM and its parent is not known, you must use a method like this:

$("known parent selector of .hovertip").on('hover', '.hovertip', function () {

"known parent selector of .hovertip" has to be an element that you know ahead of time. If you can't know, you have to use document, but I'd suggest to try to get as close as possible. You can only use this on elements that exist in the DOM at the time of binding.

Solution 4:

I think what you are looking for, actually, is something along these lines:

$(document).on('mouseover', '.hovertip', function() {
  // handle your mouseover changes, here
});

$(document).on('mouseout', '.hovertip', function() {
  // handle your mouseout changes, here
});

.live, .bind, are all deprecated, AFAIK, which means they'll go away in the future, and you might not want to rely on their continued support.

It would also be far better to replace $(document) with a selector that's closer to your .hovertip elements, but above them in the DOM nesting, so they can respond to your event, but without forcing jQuery to watch for every event on every element in the whole document. I simply put document in there as an example, as I don't know what the rest of your structure looks like.

http://jsfiddle.net/mori57/qa7py/

As I think about it, I think it's worth pointing out that throwing things to .parent() may not always work out the way you expect, especially if you're modifying the DOM. I think it's far safer to set a higher-level event handler.

If you must use something like the .parent(), I always found more accurate results with .closest(), and giving it a selector also helps the parsing engine narrow its search. You don't want one parent triggering the hover state for /all/ the .hovertips at one time, which could happen in some cases.