jquery - 如何克隆克隆的表行？

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 元素时，必须将事件委托(delegate)给自加载网页以来就已存在的祖先元素。在这种情况下，<form> (没有在问题的 HTML 中提供——但显然由提供的 jQuery 存在)。即使<table> (甚至 document 就此而言 - 尽管不推荐)也是所有 <input> 的祖先元素s，"change"事件仅适用于<form>元素和表单控件(例如 <input> 、 <select> 等)。

99% 的时间 .on()方法是委托(delegate)事件的最佳方式。以下是最有效的模式:

$("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>周围<th>并应用了 Bootstrap 类 .text-center到<thead> 。属性[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>