jquery live hover

Question

I'm using the following jquery code to show a contextual delete button only for table rows we are hovering with our mouse. This works but not for rows that have been added with js/ajax on the fly...

Is there a way to make this work with live events?

$("table tr").hover(
  function () {},
  function () {}
);

score 245 · Accepted Answer · edited Jul 30 '13 at 02:09

245

jQuery 1.4.1 now supports "hover" for live() events, but only with one event handler function:

$("table tr").live("hover",

function () {

});

Alternatively, you can provide two functions, one for mouseenter and one for mouseleave:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

edited Jul 30 '13 at 02:09

Tushar Gupta - curioustushar

58,085
24
103
107

answered Feb 14 '10 at 19:54

Philippe Leybaert

168,566
31
210
223

It still does not work for me though. I tried doing this: Where am i going wrong? > $('table tr').live('hover', function() { $(this).find('.deletebutton').toggle(); }); – Shripad Krishna Jun 06 '10 at 12:12
1

this is incorrect and does not work. see the "Multiple Events" header under the documentation for `live`: http://api.jquery.com/live/ – Jason Jul 09 '10 at 19:56
34

As of jQuery 1.4.2, .live("hover") is equivalent to .live("mouseover mouseout"), NOT .live("mouseenter mouseleave") - see http://bugs.jquery.com/ticket/6077 So, do .live("mouseenter mouseleave", function() {...}), or .live("mouseenter", function() {...}).live("mouseleave", function() {...}) – aem Nov 17 '10 at 20:40
2

thank you @aem, this worked for me: $("table tr").live("mouseenter", function() {...}).live("mouseleave", function() {...}); – jackocnr May 25 '11 at 16:42
thats brilliant, aside of mouseenter and mouseleave I assume you can use different actions (like onclick and such) here too? – xorinzor Jun 25 '12 at 13:33
3

As per the [JQuery `.live` documentation page](http://api.jquery.com/live/) it says to use `.on` instead. "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers." – johntrepreneur Jan 25 '13 at 19:57
Since `.live` is deprecated and `.on` doesn't work in some situations for elements added after the dom is loaded, see the last answer in [this SO post](http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover). – johntrepreneur Jan 25 '13 at 21:24

score 110 · Answer 2 · answered Jun 30 '10 at 14:38

110

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

answered Jun 30 '10 at 14:38

dmitko

2,607
2
21
15

Worked for me as well. +1 Tried doing Philippe's version, both with mouseover and mouseenter - neither worked. But this one did. Thanks! – eduncan911 Aug 23 '10 at 07:30
`.live` is deprecated now, see Andre's answer for replacement method now. – johntrepreneur Jan 25 '13 at 21:33
1

Using `mouseover` and `mouseout` events here will cause the code to continually fire as the user moves the mouse around inside the element. I think `mouseenter` and `mouseleave` are more appropriate since it'll only fire once upon entry. – johntrepreneur Jan 25 '13 at 22:36

score 61 · Answer 3 · answered May 10 '12 at 22:06

61

.live() has been deprecated as of jQuery 1.7

Use .on() instead and specify a descendant selector

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

answered May 10 '12 at 22:06

Andre

1,852
1
16
21

7

this works flawlessly as of jquery 1.9. all live and delegate solutions are DEPRECATED! it would be awesome if someone could unaccept the accepted answer and accept this one instead. – Jascha Ehrenreich Mar 07 '13 at 15:49

score 5 · Answer 4 · answered Feb 14 '10 at 19:46

As of jQuery 1.4.1, the hover event works with live(). It basically just binds to the mouseenter and mouseleave events, which you can do with versions prior to 1.4.1 just as well:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

This requires two binds but works just as well.

score 5 · Answer 5 · answered Jun 08 '10 at 04:34

5

This code works:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });

answered Jun 08 '10 at 04:34

Jorge E. Cardona

92,161
3
37
44

2

What is "ui-state-hover"? How does that apply to the user's original question? – IgorGanapolsky Jun 10 '10 at 19:47

score 2 · Answer 6 · answered Jul 26 '11 at 18:45

WARNING: There is a significant performance penalty with the live version of hover. It's especially noticeable in a large page on IE8.

I am working on a project where we load multi-level menus with AJAX (we have our reasons :). Anyway, I used the live method for the hover which worked great on Chrome (IE9 did OK, but not great). However, in IE8 It not only slowed down the menus (you had to hover for a couple seconds before it would drop), but everything on the page was painfully slow, including scrolling and even checking simple checkboxes.

Binding the events directly after they loaded resulted in adequate performance.

useful, but more a comment than an answer. – mikemaccana Feb 04 '12 at 23:55 — mikemaccana, Feb 04 '12 at 23:55

Nefise Özşahin · Answer 7 · 2022-09-26T07:12:35.997

0

You should use $(document). İf you dont use this, the new added table rows not works properly.

$(document).on("mouseover","table tr",function(event){

//show buttons

});

$(document).on("mouseout","table tr",function(event){

//hide buttons

});

edited Sep 26 '22 at 07:12

answered Sep 26 '22 at 07:07

Nefise Özşahin

59
1
3

jquery live hover

7 Answers7

Linked

Related