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 () {}
);

Carpi

Answer 1

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 () {

    }
});

Internode

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(); }); – Gaylordgaylussac

this is incorrect and does not work. see the "Multiple Events" header under the documentation for live: api.jquery.com/live – Indecisive

As of jQuery 1.4.2, .live("hover") is equivalent to .live("mouseover mouseout"), NOT .live("mouseenter mouseleave") - see bugs.jquery.com/ticket/6077 So, do .live("mouseenter mouseleave", function() {...}), or .live("mouseenter", function() {...}).live("mouseleave", function() {...}) – Overshadow

thank you @aem, this worked for me: $("table tr").live("mouseenter", function() {...}).live("mouseleave", function() {...}); – Cassius

thats brilliant, aside of mouseenter and mouseleave I assume you can use different actions (like onclick and such) here too? – Claudine

As per the JQuery .live documentation page it says to use .on instead. "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers." – Spermiogenesis

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

Answer 2

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

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

Undirected

Worked for me as well. +1 Tried doing Philippe's version, both with mouseover and mouseenter - neither worked. But this one did. Thanks! – Uno

.live is deprecated now, see Andre's answer for replacement method now. – Spermiogenesis

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

Answer 3

.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

Duce

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

Answer 4

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.

Purveyance

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

Hilaryhilbert

What is "ui-state-hover"? How does that apply to the user's original question? – Abelmosk

Answer 6

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.

Cioffi

useful, but more a comment than an answer. – Wichman

Answer 7

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

});

Littman