Почему функция jQuery.live не работает со статическими элементами?

Question

У меня есть динамическая таблица HTML, где я могу добавлять и удалять строки.Каждая строка содержит кнопку, которая имеет класс removeRow.

В моем JavaScript у меня есть:

$('button.removeRow').live("click", function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

Проблема в том, что она работает для всех кнопок, которые принадлежат строкам, которые быливставляется после загрузки страницы (нажав на кнопку «Добавить строку»).

Работает для существующих кнопок, только если я изменяю приведенный выше код на (но тогда он не работает для динамически добавляемых строк):

$('button.removeRow').click(function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

Я думаю, что функция live должна работатьдля обоих, так вы можете указать мне правильное направление?Где это может пойти не так?

Answer 1

ОК. Сегодня я нашел ошибку.Где-то в моем коде у меня было:

$('input[type=submit], button').click(function () {
            return false;
});

Я хотел, чтобы он работал с кнопкой отправки, чтобы он не отправлял форму при нажатии.Я не помню, почему я положил кнопку там.В любом случае, из-за этого мои статические нажатия кнопок были прикреплены к этому событию, а динамически созданные - нет.Поэтому живой «щелчок» работал для динамических кнопок.Глупая ошибка ...

Answer 2

Возможно, что-то идет не так, если ваш селектор .parents() сопоставляет другие элементы tr.Попробуйте .closest():

$('button.removeRow').live("click", function(){  
  $(this).closest('tr').remove();
  return false;
});

Answer 3

Прямая трансляция должна работать как для динамических, так и для предварительно визуализированных элементов.

Я бы начал с выяснения, действительно ли этот контент существует до запуска jQuery ... Попробуйте вывести где-нибудь результат следующего, или используйте ключевое слово debugger, или даже страшный alert:

$('button.removeRow').length
// The rest of your click handler definition...

Answer 4

Hacky решение: сделать оба

$('button.removeRow').live("click", function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

и

$('button.removeRow').click(function () {  
        var row = $(this).parents('tr')  
        row.remove();  
        return false;  
});

Было бы полезно, если бы вы опубликовали пример HTML, а также код, отвечающий за вставку новых строк.