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);

}）;

每当我点击ID为add_ingr的元素时，会在表上成功添加一个新行，但每当我点击具有remove类的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')，这将选择最近的表格行。

Jquery .clicked不起作用

1 个答案: