Метод JQuery делегата не работает

Question

Я пытаюсь использовать метод делегата в сетке, которую я обертываю с помощью плагина DataTables.Net. У меня изначально был этот код, который работает как положено.

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

Однако, если я изменю размер подкачки, у более новых строк не будет события click, вызывающего функцию. Я решил, что новый метод делегата JQuery должен делать именно то, что я хотел; однако, это ничего не делает на любом элементе tr.

Может ли кто-нибудь объяснить, почему это не работает:

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

Я пробовал разные комбинации селектора, и ни одна не заставила его работать.

Спасибо Пол Сперанса

Answer 1

Попробуйте вместо этого:

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

Есть большая вероятность, что некоторые события на вашем теле запутались и / или вашими телами манипулируют. Я сомневаюсь, что вся таблица также страдает от этой проблемы.

Answer 2

Используйте это:

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

.live() работает на ток будущих элементов.

Answer 3

За кадром bind, delegate и live все используют метод on.

У меня было несколько проблем с delegate, поэтому я начал использовать on. Преобразовать ваши delegate вызовы в on очень просто: просто поменяйте местами первый и второй аргументы.

Это:

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

Получается так:

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

Кстати: live устарела в новой версии jQuery

Answer 4

Попробуйте это

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

или

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

Answer 5

Если новые строки добавляются динамически, вы должны использовать метод live для элементов, измените delegate на live