Question

我希望能够在单击X时删除动态创建的行。

我可以通过点击

来删除第一行

$('.delete').click(function() {
 $(this).parents('.item-row').remove();
update_total();
});

但是它不适用于随后创建的行。这就是我创建行的方式

$('#addservice').click(function(){
  var $row = $('<tr valign="top" class="item-row"><td width="30"><a class="delete" title="Remove row">X</a></td><td width="410"><input name="customFieldName" type="text" size="50" id="customFieldName" /></td><td align="center"><input name="customFieldOurCost" type="text"/></td><td width="130" align="center"><input name="customFieldQuantity" type="text" size="10" class="qty" id="customFieldQuantity" /></td><td width="130" align="center"><input name="customFieldPrice" class="cost" type="text" size="10" id="customFieldPrice" /></td><td width="130" align="center"><input type="checkbox" name="GST" checked="checked" class="gst" /></td><td width="130" align="center"><span class="exprice">$00.00</span></td><td width="130" align="center"><span class="incprice">$00.00</span></td></tr>').insertAfter(".item-row:last");


  bind($row);
  });


  function bind($row) {
                    $row.find('.cost').blur(update_price);
                    $row.find('.qty').blur(update_price);   
                    $row.find('.gst').click(update_price);
                    $row.find('input[name="customFieldName"]').autocomplete({
                        source: "DataQueries/LoadServices.asp",
                        minLength: 2
                    });
                    $row.find('input[name="customFieldName"]').blur(function() {
                        $.get('DataQueries/FetchQuantity.asp?ServiceName=' + encodeURI($row.find('#customFieldName').val()), function(data) {

                            $row.find('#customFieldQuantity').val(data); 
                        });
                        $.get('DataQueries/FetchPrice.asp?ServiceName=' + encodeURI($row.find('#customFieldName').val()), function(data2) {

                            $row.find('#customFieldPrice').val(data2); 
                        });

                    });

由于

Answer 1

只需使用事件委托，如下所示：

$(document).on('click', '.delete', function() {
  $(this).parents('.item-row').remove();
  update_total();
});

您不必使用document作为选择器，任何常见的父元素都可以使用。这样做是将单击处理程序绑定到父元素（它需要是静态的，而不是在DOM的生命周期中动态添加/删除），它接收从子元素“冒泡”的点击事件。然后，它对这些事件（'.delete'）应用过滤器，仅在特定子元素的事件上调用自身，并执行该函数。

这样，在事实之后添加的任何元素仍将被过滤器捕获，因为它们的事件将到达公共父元素。

Answer 2

请参阅，只能使用事件委派来注册在运行时创建的元素的事件。

尝试，

$(document).on('click','.delete',function() {
 $(this).parents('.item-row').remove();
update_total();
});

Answer 3

尝试使用实时点击操作替换您的点击操作 -

$('.delete').live('click' ,function() {
    $(this).parents('.item-row').remove();
    update_total();
});

这会将点击操作添加到任何匹配删除的新dom元素。

Answer 4

您需要将事件委托给最近的静态父级。

$(document).on('click', '.delete', function() { // delegate to document
  $(this).closest('.item-row').remove(); // use .closest() for improvement
  update_total();
});

所以我在这里将事件委托给$(document)，但您可以委托给最近的静态父母，该父母必须是您的table ID/className或table holder div's ID/className。

而不是.parents()使用.closest()来遍历父项。

在动态行上绑定删除功能

4 个答案: