Jquery .clicked не работает

Question

Я пытаюсь добавить еще одну строку в таблицу (которая содержит входные данные формы) при нажатии кнопки добавления.

Вот мой код:

$("#add_ingr").click(function(){
    var row = '<tr>'
                   +'<td>' 
                      +'<?php $data = array('name' => 'ingr_name[]', 'class' => 'ingr_name'); echo form_input($data); ?>'
                   +'</td>'
                   +'<td>'  
                      +'<?php $data = array('name' => 'ingr_amount[]', 'class' => 'amt'); echo form_input($data); ?>'
                   +'</td>'
                   +'<td>'
                      +'<?php $data = array('name' => 'ingr_unit[]', 'class' => 'unit'); echo form_input($data); ?>'
                      +'<span class="remove">X</span>'+'</td>';                                                             
              +'</tr>';

   $("#ingr_table > tbody").append(row);

});

Всякий раз, когда я щелкаю элемент с идентификатором add_ingr, новая строка успешно добавляется в таблицу, но всякий раз, когда я щелкаю текст x, имеющий класс удаления, этот код никогда не выполняется:

$("span.remove").click(function() {
alert('clicked');
    $(this).parent().remove();
});

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

Может кто-нибудь сказатьмне что не так с этим?Буду очень признателен за вашу помощь.Заранее спасибо.

Answer 1

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

$("span.remove").live('click', function() {
    alert('clicked');
    $(this).closest('tr').remove();
});

, чтобы он span.remove всегда был связан, или поместите привязку внутри другой функции щелчка:

$("#add_ingr").click(function(){
    var row = $('<tr>'
                   +'<td>' 
                      +'<?php $data = array('name' => 'ingr_name[]', 'class' => 'ingr_name'); echo form_input($data); ?>'
                   +'</td>'
                   +'<td>'  
                      +'<?php $data = array('name' => 'ingr_amount[]', 'class' => 'amt'); echo form_input($data); ?>'
                   +'</td>'
                   +'<td>'
                      +'<?php $data = array('name' => 'ingr_unit[]', 'class' => 'unit'); echo form_input($data); ?>'
                      +'<span class="remove">X</span>'+'</td>';                                                             
              +'</tr>');

   $("#ingr_table > tbody").append(row);
   row.find('span.remove').click(function() {
     alert('clicked');
     $(this).closest('tr').remove();
   });
 });
});

Кроме того, .parent() выберет элемент <td>, поэтому я изменил его на .closest('tr'), который выберет ближайшую строку таблицы.