javascript - 如何使用 javascript/jquery 克隆/复制 html 表

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 4 年前。

我在这里遇到一个问题，当我单击最近复制的行上的复制按钮时。这不起作用。你们知道如何解决这个问题吗？

这是我的代码

var controller = function(num1) {
    $('#copy-' + num1).click(function() {

      var $tableBody = $('#table_name').find("tbody"),
        $trLast = $tableBody.find("#tr-" + num1),
        $trNew = $trLast.clone();
      // $trNew.find('input').val('');
      $trLast.after($trNew);
      console.clear()
      // refresh_index();

    });
  }

  function refresh_index() {
    $('#table_name > tbody > tr').each(function(i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

这是我在 JSFIDDLE 中的代码

Answer 1

要在动态创建的元素上附加单击事件，请使用 .on() 的委托(delegate)方法。 。这将允许事件对稍后添加到正文中的元素起作用。

改变

$('#copy-' + num1).click(function() {

至

$('body').on('click','#copy-'+num1, function() {

$(function(){

	var controller = function(num1){
    $('body').on('click','#copy-'+num1, function() {

      var $tableBody = $('#table_name').find("tbody"),
          $trLast = $tableBody.find("#tr-"+num1),
          $trNew = $trLast.clone();
          // $trNew.find('input').val('');
          $trLast.after($trNew);
          console.clear()
          // refresh_index();

    });
  }
  
  function refresh_index(){
  	$('#table_name > tbody > tr').each(function (i) {

      i++;
      var select = $(this).find('select');
      var text = $(this).find('input');
      var button = $(this).find('button');

      controller(i);

    });
  }
  refresh_index();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><button class="copy" id="copy-1">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><button class="copy" id="copy-2">Copy</button></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><button class="copy" id="copy-3">Copy</button></td>
    </tr>
  </tbody>
</table>