如何克隆克隆的表行？

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

在处理动态添加的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
 });

另外，请注意，我通过在<table>周围包装一个<thead>并将Bootstrap类.text-center应用于<thead>，对<th>进行了一些更正。属性[align]已被弃用，如果您没有Bootstrap，请使用CSS属性text-align。

还有一条建议:如果你把jQuery/JavaScript放在主体结束标记(即</body>)之前，那么你不需要把所有东西都包装在$(document).ready({...})中。不管您是否这样做，将<script>放在结束</body>标记之前是99%最有效的地方。

演示

​

$('#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>

​

Answer 2

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

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之后添加的，所以默认情况下，这不会应用于那些新添加的行。