Строки таблицы, вставленные Jquery, не функционируют как строки таблицы из исходного HTML

Question

У меня есть страница, которая содержит таблицу в следующем формате:

    <table id="gigsTable">
        <tr><th>Date</th><th>Time</th><th>Location</th><th>Remove</th></tr>
        <tr class="gigRow">
            <td><input name="date" type="text" value="Date goes here"></td>
            <td><input name="time" type="text" value="Time goes here"></td>
            <td><input name="location" type="text" value="Location goes here"></td>
            <td class="remove"><input name="remove" type="checkbox" /></td>
        </tr>

Когда флажок в столбце удаления установлен, его родительская строка исчезает, а затем удаляется с помощью следующего jQuery:

    $("#gigsTable tr .remove input").click(function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

У меня также есть кнопка, которая добавляет строку в таблицу при нажатии:

    $('#addGig').click(function() {
        $('#gigsTable tr:last').after('<ROW FORMAT FROM HTML>');
        rowCount++;
    });

Это все работает нормально, однако, когда я пытаюсь удалить строку, вставленную вышеописанным способом, ничего не происходит. Почему?

Answer 1

Причина в том, что вы устанавливаете функцию удаления при загрузке страницы, которая не содержит новых элементов.Так что попробуйте сделать с live функцией Jquery, которая также свяжет событие click с вашими новыми элементами.

 $("#gigsTable tr .remove input").live("click",function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

Answer 2

Используйте on() вместо прямого события click().

Он будет автоматически подписывать все вновь созданные элементы управления при вставке строк.

Answer 3

Строки, которые вы добавили, не были связаны с событием click, вам потребуется что-то вроде on или live в зависимости от вашей версии jQuery.

Answer 4

Обработчик события click может получить доступ только к тем элементам, которые присутствуют при начальной загрузке страницы. Для управления динамически добавляемыми элементами используйте on или delegate.

Кроме того, вместо parent().parent() вы можете использовать closest('tr')

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

$("#gigsTable tr .remove").delegate('input', 'click', function() {
    $(this).closest('tr').fadeOut(500, function() {
        $(this).remove();
        rowCount--;
    });
});

Или, если вы используете jQuery 1.7+, используйте on.

$("#gigsTable tr .remove").on('click', 'input', function() {
    $(this).closest('tr').fadeOut(500, function() {
        $(this).remove();
        rowCount--;
    });
});