为何jQuery clone方法未复制表格内动态添加的数据？

嘿，我一眼就看出问题所在了——你现在的代码是在页面加载时先调用ShowInvoice()，然后立刻执行克隆操作，但ShowInvoice()里是通过异步请求从后端拿数据的啊！异步请求不会阻塞后续代码执行，所以克隆的时候，表格的动态数据还没来得及渲染到页面上，自然只能克隆出表头和样式了。

给你两个关键的解决思路，直接就能搞定：

1. 把克隆操作放到异步请求的回调里 #

这是最直接的方案——等数据完全渲染到表格之后，再执行克隆。你需要修改ShowInvoice()函数，把克隆代码移到AJAX请求的success回调（也就是数据加载完成、表格行追加完毕的地方）：

$(document).ready(function() {
  ShowInvoice();
});

function ShowInvoice() {
  var url = '@Url.Action("PrintInvoice")';
  // 假设你用的是jQuery AJAX，调整成你实际的请求方式
  $.ajax({
    url: url,
    type: 'GET', // 根据后端接口调整为POST或其他
    data: {}, // 你的请求参数
    success: function(response) {
      // 这里是你原来动态生成表格行的代码
      var $tableBody = $('#tblInvoice tbody');
      $tableBody.empty(); // 清空旧数据（如果需要）
      
      // 遍历后端返回的数据，生成表格行
      $.each(response, function(index, invoiceItem) {
        var $row = $('<tr></tr>');
        $row.append(`<td>${invoiceItem.InvoiceNumber}</td>`);
        $row.append(`<td>${invoiceItem.Amount}</td>`);
        // 追加其他需要的单元格...
        $tableBody.append($row);
      });
      
      // ！！！关键：数据渲染完成后再克隆表格
      $('#tblInvoice').clone(true).appendTo('.table-responsive');
    },
    error: function(xhr, status, err) {
      console.error('加载发票数据失败:', err);
    }
  });
}

2. 理解为什么原来的代码失效 #

再给你捋清楚逻辑：

• 当你调用ShowInvoice()时，它只是发起了一个异步HTTP请求，然后立刻返回，代码继续执行后面的clone操作
• 这时候后端的数据还没返回，表格里只有初始化的表头，没有动态行
• 等后续AJAX请求成功、数据渲染到表格时，克隆操作早就执行完了，自然不会包含新数据

额外小提示 #

• 你用的clone(true)里的true是用来复制元素上绑定的事件处理程序的，如果你的表格事件是用委托（比如$(document).on('click', '#tblInvoice tr', ...)）绑定的，那其实不需要带true，因为委托事件是绑定在父元素上的，克隆后的表格元素依然能触发事件。

内容的提问来源于stack exchange，提问作者user9677867