Question

我正在编写允许添加和删除新行的内容，原始行可以删除，但克隆的行不能删除。这是我的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 -->

我看不出原因，欢迎任何建议！提前致谢

Answer 1

当您创建新行时，它是动态的，并且没有removeVarRow方法，只有您运行时页面上存在的.removeVarRow元素{{ 1}}有一个删除方法，因为它不适用于该类的未来元素。

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

removeVarRow

Answer 2

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

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

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

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

到新创建的行。

删除克隆的行不工作jquery

2 个答案: