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

Question

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

这是我的代码

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();

这是我在中的代码

Answer 1

要在动态创建的元素上附加click事件，请使用使用.on()的委托方法。这样一来，该事件便可以处理稍后添加到正文中的元素。

更改

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

Answer 2

您是在dom加载后添加它的，因此找不到它。如果您使用on函数将目标添加到动态添加之前的dom中，然后将目标添加到“ click”之后的第二个变量中，那么它将起作用。

$(function(){

	var controller = function(num1){
  
    var newThingy = '#copy-' +  num1;
    
    $("#table_name").on("click", newThingy, 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.2.0/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>

Answer 3

使用$tableBody.find('.copy').off('click').on('click',function(){});之类的委托事件，并在克隆tr之后绑定单击事件，最好使用class而不是ids。这是基于您的jsfiddle更新的代码。

var $tableBody = $('#table_name').find("tbody");
clickEvent();
function clickEvent(){
  $tableBody.find('.copy').off('click').on('click',function() {
          $trLast = $(this).closest('tr'),
          $trNew = $trLast.clone();
          $trLast.after($trNew); 
          clickEvent();
  });
   function refresh_index(){
  	$('#table_name > tbody > tr').each(function (i) {
      i++;
      var select = $(this).find('td').eq(0).text(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>