How to use jQuery live() to bind multiple events to all table rows after adding additional rows?

Question

I'm trying to bind three events to one selector using the live() method, but I can't seem to get it working.

Here's what I have so far, and it works until I add additional table rows:

$("tr:has(td)").live('click',function(event){
      //do stuff
}).live('mouseover',function(){
    $(this).toggleClass('highlight');
}).live('mouseout',function(){
    $(this).toggleClass('highlight');
});

Once I add additional table rows, only the click event works. How can I get all three events to work after adding table rows?

Answer 1

In your example you're adding a live() on something that is not the object you want by going live().live().live() . This is the way jQuery handles chaining.

What you need to do is :

var $o = $("tr:has(td)");
$o.live('click',function(event){
      //do stuff
});
$o.live('mouseover',function(){
    $(this).toggleClass('highlight');
});
$o.live('mouseout',function(){
    $(this).toggleClass('highlight');
});

Here is an article on chaining

Answer 2

I think you have to do $("tr:has(td)").live() three times - you can't chain it.

Answer 3

Instead of using live() you can use event delegation, which is much more elegant:

$('table').hover(function(e) {
    $(e.target).closest('tr').addClass('highlight');
}, function(e) {
    $(e.target).closest('tr').removeClass('highlight');
})