Question

我无法使用按钮删除桌子上的行。

HTML：

<select class="combobox form-control">
    <option value="" selected="selected">Choose a Person</option>
    <option>Bob</option>
    <option>Kyle</option>
</select>
<br>


<!-- Table -->
<table class="table">
    <thead>
        <div class="container">
            <tr>
                <th>First Last Name</th>
            </tr>
        </div>
    </thead>
</table>

JS / Jquery的：

$('.combobox').change(function(e) {

   var selectedVal = $(this).val();
   $('.table').append('<tr><td>' + selectedVal + '</td><td><img class="delete" src="images/delete.png" width="25" height="25"/></td></tr>');

});

$('table td img.delete').click(function(){
    $(this).parent().parent().remove();
});

我正在使用Bootstrap。任何帮助都会很棒！

Answer 1

查看委派活动http://learn.jquery.com/events/event-delegation/

演示：http://jsfiddle.net/robschmuecker/Z7fG7/20/

 var i = 1;
 $("#addbutton").click(function () {
     $("table tr:first").clone().find("input").each(function () {
         $(this).val('').attr({
             'id': function (_, id) {
                 return id + i
             },
                 'name': function (_, name) {
                 return name + i
             },
                 'value': ''
         });
     }).end().appendTo("table");
     i++;
 });

 $(document).on('click', 'button.removebutton', function () {
     alert("aa");
     $(this).closest('tr').remove();
     return false;
 });

Answer 2

或者，除了上述内容，默认情况下使用.clone时会删除所有事件。使用现有代码更清晰的答案：

编辑：忘了解释！使用.clone（true）可以保留事件。您的.on函数正常工作，无需在每个新行上重新应用它。

var i = 1;
$("#addbutton").click(function() {
$("table tr:first").clone(true).find("input").each(function() {
$(this).val('').attr({
  'id': function(_, id) {return id + i },
  'name': function(_, name) { return name + i },
  'value': ''               
});
}).end().appendTo("table");
  i++;

});

$('button.removebutton').on('click', function() {
    alert("aa");
  $(this).closest( 'tr').remove();
  return false;
});

Answer 3

必须将删除图像的点击处理程序添加到表格中的每个新行。

$('.combobox').change(function(e) {

   var selectedVal = $(this).val();
   $('.table').append('<tr><td>' + selectedVal + '</td><td><img class="delete" src="images/delete.png" width="25" height="25"/></td></tr>');
   $('table td img.delete').click(function(){
       $(this).parent().parent().remove();
   });

});

无法使用jquery删除表[Row]

3 个答案: