JQuery delegate method not working

Question

I am trying to use the delegate method on a grid that I wrap with the DataTables.Net plug-in. I originally had this code which works as expected.

    $("#myGrid tbody tr").click(function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    });

However, if I change the paging size then the newer rows don't have the click event calling the function. I decided the new JQuery delegate method should do exactly what I wanted; however, it does nothing at all on any tr element.

Could anyone explain why this does not work :

    $('#myGrid tbody').delegate('tr', 'click', function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    }); 

I have tried different combinations of the selector and none get it to work.

Thanks Paul Speranza

Answer 1

Use this:

$("#myGrid tbody tr").live('click', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
});

.live() works for current of future elements.

Answer 2

If the newer rows are being added dynamically, you have to use live method on the items, change the delegate to live

Answer 3

Try this instead:

$('#myGrid').delegate('tr', 'click', function() {
  var id = $(this).children('td').eq(0).text();
  alert(id);
});

There's a good chance that some events on your tbody are getting messed with and/or your tbody's are getting manipulated. I doubt the entire table suffers from this problem as well.

Answer 4

Try this

$('#myGrid tbody').delegate('click', 'tr', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
});

or

$('body').delegate('click', '#myGrid tbody tr', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
});