如何克隆克隆表行？

Question

我有一个表，其中已经有5行，我添加了js代码，以便当用户在最后一行中键入内容时，它会被克隆（可以正常工作），但是当用户在克隆行中键入内容时，它会没有被克隆。有人可以帮我解决为什么它不起作用吗？

$(document).ready(function() {
  $(".keynum").change(function(event) {
    $("#frmOK").val("1");
    var pid = $('#p').val();

    lastval = $(".keynum").last().val();
    if (lastval != "") {
      var $tableBody = $('#tblKeyNumQty').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();
      $trLast.after($trNew);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tblKeyNumQty" class="table table-responsive table-striped table-bordered">
  <tbody>
    <tr>
      <th align="center">Key Number</th>
      <th align="center">Quantity</th>
    </tr>
    <tr>
      <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum" value="" onkeypress="return event.keyCode != 13;" /></td>
      <td><input name="qty[]" type="number" min="2" class="form-control" value="2" onkeypress="return event.keyCode != 13;" /></td>
    </tr>
    <tr>
      <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum" value="" onkeypress="return event.keyCode != 13;" /></td>
      <td><input name="qty[]" type="number" min="2" class="form-control" value="2" onkeypress="return event.keyCode != 13;" /></td>
    </tr>
    <tr>
      <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum" value="" onkeypress="return event.keyCode != 13;" /></td>
      <td><input name="qty[]" type="number" min="2" class="form-control" value="2" onkeypress="return event.keyCode != 13;" /></td>
    </tr>
    <tr>
      <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum" value="" onkeypress="return event.keyCode != 13;" /></td>
      <td><input name="qty[]" type="number" min="2" class="form-control" value="2" onkeypress="return event.keyCode != 13;" /></td>
    </tr>
    <tr>
      <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum" value="" onkeypress="return event.keyCode != 13;" /></td>
      <td><input name="qty[]" type="number" min="2" class="form-control" value="2" onkeypress="return event.keyCode != 13;" /></td>
    </tr>
  </tbody>
</table>

Answer 1

还将更改处理程序也添加到新创建的表行中：

function keynumChange(event) {
        $("#frmOK").val("1");
        var pid = $('#p').val();

        lastval = $(".keynum").last().val();
        if (lastval != "") { 
            var $tableBody = $('#tblKeyNumQty').find("tbody"),
            $trLast = $tableBody.find("tr:last"),
            $trNew = $trLast.clone();
            $trNew.change(keynumChange); // <- mind this!
            $trLast.after($trNew);
        }

}
$( document ).ready(function() {
    $( ".keynum" ).change(keynumChange);
});

由于它们是在$(document).ready之后添加的，因此默认情况下不适用于那些新添加的行。

Answer 2

处理动态添加的DOM元素时，必须将事件委派给自加载网页以来已经存在的祖先元素。在这种情况下，<form>（问题HTML中未提供-但显然由提供的jQuery存在）。尽管<table>（即使是document，尽管不建议使用）也是所有<input>的祖先元素，但"change"事件仅适用于<form>元素和表单控件（例如<input>，<select>等）。

99％的时间，.on()方法是委派事件的最佳方法。以下是最有效的模式：

$("selectorOfAncestor").on("eventType", "selectorOfTargets", eventHandler);
// So if you had <form id="OK"> wrapped around the <table>...
$("#OK").on("change", ".keynum:last", cloneLast)
// When defining the event handler (ex. function cloneLast(e) {... ) ".keynum:last" = this

jQuery使您能够以非常灵活和准确的方式方便地“完全覆盖”许多元素-因此，您应该从不使用事件属性这样的可憎之处：

<input ... onkeypress="return event.keyCode != 13;">

使用一行代码-而不是同一代码的100行：

 $('input').on('keypress', function(e) {
    return e.keyCode != 13
 });

$('#OK').on('change', '.keynum:last', cloneLast);

function cloneLast(e) {
  if ($(this).val() !== '') {
    $(this).closest('tr').clone().appendTo($(this).closest('tbody'));
  }
}

$('input').on('keypress', function(e) {
  return e.keyCode != 13
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


<form id='OK'>
  <table id="tblKeyNumQty" class="table table-responsive table-striped table-bordered">
    <thead class='text-center'>
      <tr>
        <th>Key Number</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum"></td>
        <td><input name="qty[]" type="number" min="2" class="form-control" value="2"></td>
      </tr>
      <tr>
        <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum"></td>
        <td><input name="qty[]" type="number" min="2" class="form-control" value="2"></td>
      </tr>
      <tr>
        <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum"></td>
        <td><input name="qty[]" type="number" min="2" class="form-control" value="2"></td>
      </tr>
      <tr>
        <td><input name="keynum[]" placeholder="SKU-123" class="form-control keynum"></td>
        <td><input name="qty[]" type="number" min="2" class="form-control" value="2"></td>
      </tr>
    </tbody>
  </table>
</form>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>