0
$(".hovertip").parent().live('hover', function() {
  ...

The above code doesn't seem to register.

This doesn't seem to work either:

$(".hovertip").parent().live({
  mouseenter:
    function() {
    ...

Any examples of .live, .delegate, .bind, or .on working with a jQuery selector and a .parent() selector with .hover() or mouseenter: and mouseleave:?

Update: I've created a separate question to address the dynamic DOM issue this Question has raised: jQuery .on() with a .parent() and dynamic selector

Community
  • 1
  • 1
Verdi Erel Ergün
  • 1,021
  • 2
  • 12
  • 20
  • 2
    Are you trying to get the hover to be triggered by .hovertip, or by its parent (just to be clear, here...)? – Jason M. Batchelor Oct 17 '12 at 00:09
  • Do a search on Google and you'll find plenty of them. Here's one: '$("a.offsite").live("click", function(){ alert("Goodbye!"); });' – Xtian Macedo Oct 17 '12 at 00:09
  • @XtianMacedo that won't resolve the issuse with `live('hover')` – charlietfl Oct 17 '12 at 00:11
  • `.live` does not work with traversal methods, see the documentation: http://api.jquery.com/live/. For a useful suggestion we would need to see your HTML and know which part is dynamic (added later) and which one is static. – Felix Kling Oct 17 '12 at 00:54
  • $(".hovertip").parent().on('hover', function() { alert('yay'); }); is working, unfortunately once the page refreshes through AJAX it stops working. – Verdi Erel Ergün Oct 18 '12 at 00:59

4 Answers4

4

Try:

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

Note: .on was introduced in jQuery 1.8.

Working demo http://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"

Community
  • 1
  • 1
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • won't be available for future elements by using element as selector which is likely why OP is using `live` – charlietfl Oct 17 '12 at 00:27
  • @charlietfl `:)` cheers bruv! here you go : http://jsfiddle.net/TURBX/2/ if OP really wanna use live `:)` – Tats_innit Oct 17 '12 at 00:30
  • Update: I tried the delegate and on methods. On is working but not once the page is refreshed through AJAX. Delegate is not picking up the correct selector. By the way, I noticed I didn't mention the AJAX bit in the original problem, so I'll accept the ticket, but if anyone has insights on having the method work with dynamic DOM changes (like Live would have), it would be appreciated. – Verdi Erel Ergün Oct 18 '12 at 00:57
1

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.

Jason M. Batchelor
  • 2,951
  • 16
  • 25
1

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.

Community
  • 1
  • 1
Maxime Morin
  • 2,008
  • 1
  • 21
  • 26
1

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.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405