0

我正在写一些允许添加和删除新行的东西，可以删除原始行，但不能删除克隆的行。这是我的 JS：

(function( $ ) {

  $.fn.addVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // Set some variables
        var $this = $(this);
        var $target = $('#newVarTable tbody tr:last');
        var $newRow = $target.clone();

        $target.after($newRow);

    })
  }

  $.fn.removeVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // remove row
        $(this).closest('tr').remove();

        return false;

    });
  };

})( jQuery );

jQuery(document).ready(function ($) {

    // Bind the click for adding a row
    $('#addVarRow').addVarRow();
    $('.removeVarRow').removeVarRow();

});

这是我的行：

        <!-- !Repeat me: Start -->
        <tr>
            <td>
                <input type="text" id="varSKU[]" name="varSKU[]" value="" style="width: 99%" placeholder="ie Product number, AB01234">
            </td>
            <td>
                <input type="text" id="varD1[]" name="varD1[]" value="" style="width: 99%" placeholder="ie 'Red'">
            </td>
            <td>
                <input type="text" id="varD2[]" name="varD2[]" value="" style="width: 99%" placeholder="ie 'Large'">
            </td>
            <td><a href="#removeRow" class="removeVarRow">Remove</a></td>
        </tr>
        <!-- Repeat me: End -->

我不明白为什么，欢迎任何建议！提前致谢

4

2 回答 2

2

当您创建新行时，它是动态的，并且没有removeVarRow方法，只有.removeVarRow您运行时页面上存在的元素removeVarRow才有删除方法，因为它不适用于未来的元素那堂课。

您需要将点击处理程序添加到委派的非动态父级，或者在创建新行时添加。

(function($) {
   $.fn.addVarRow = function() {
       return this.each(function() {
           $(this).on('click', function(e) {
               e.preventDefault();
               var $target = $('#newVarTable tbody tr:last'),
                   $newRow = $target.clone(false);

               $target.after($newRow);

               /* add a click handler to the newly created element */
               $newRow.find('.removeVarRow').on('click', function(e) {
                   e.preventDefault();
                   $(this).closest('tr').remove();
               });
            });
       });
   };
})(jQuery);
于 2013-04-13T16:48:46.990 回答
0

在我看来， addVarRow 和 removeVarRow 不适用于新创建的行。这些功能基本上是点击绑定。如果它们未应用于新行，则单击它们不会做任何事情。

我会尝试修改 addVarRow 中的以下代码：

$target.after($newRow).addVarRow().removeVarRow();

这将 1. 创建一行，2. 绑定“点击时的新行”，3. 绑定“点击时删除行”

到新创建的行。

于 2013-04-13T16:59:45.583 回答