JQuery добавить / удалить HTML строку

Question

У меня есть простая HTML-таблица, где я хочу динамически удалять и добавлять строки. В html-таблице есть значок удаления, щелкнув по нему, сценарий jquery удаляет строку.
код для таблицы:

<table id="table1"><tr><td>
<img class="delete" alt="delete" src="delete_icon.png" />
</td></tr></table>

ссылка добавляет новую строку:

<a href="#" name="addRow">Add Row</a>

оба сценария jquery над HTML-кодом таблицы:

<script type="text/javascript">
    /* delete row */
    $(document).ready(function () {
        $('#table1 td img.delete').click(function () {
            $(this).parent().parent().remove();
        });
    });

    /* add new row */
    $(document).ready(function () {
        // Code between here will only run when the document is ready
        $("a[name=addRow]").click(function () {
            // Code between here will only run when the a link is clicked and has a name of addRow
            $("table#table1 tr:last").after('<tr><td><img class="delete" alt="delete" src="@Url.Content("~/content/delete_icon.png")" /></td></tr>');
            return false;
        });
    });

</script>

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

есть идеи?

Answer 1

Вам нужно использовать live()

$('#table1 td img.delete').live('click', function(){ ... });
$("a[name=addRow]").live('click', function (){ ... }); 

Answer 2

Вам необходимо использовать функцию jQuery live , которая позволяет привязывать события к элементам, которые еще не были представлены в DOM.

$(document).ready(function() {
    $('#table1 td .delete').live('click', function() {
        $(this).parent().parent().remove();
    });
});

Я добавил пример здесь на jsFiddle, но пришлось поменять теги img на теги, не имеющие доступа к вашему изображению.

Answer 3

Это потому, что недавно добавленные строки не имеют обработчика события click, прикрепленного к ссылке удаления. Вам нужно будет добавить его вручную при создании новой строки или использовать live () , который будет автоматически прикреплять события к вновь созданным узлам DOM.

Answer 4

$('#table1 td img.delete').click(function () {

привязывает обработчик клика только к элементам, которые уже присутствуют. Вы должны либо связать этот обработчик с новыми добавленными строками в момент их добавления, либо использовать делегирование событий через .delegate или .live.

Answer 5

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

См. Jsfiddle здесь: http://jsfiddle.net/