使用jQuery克隆现有div遇到问题，求具体实现方法

嘿，我来帮你搞定这个问题！克隆div其实用jQuery的.clone()方法就可以轻松实现，但要注意几个细节，比如重复ID、表单值清空和事件绑定的问题，我结合你的代码给你具体的步骤和例子：

基本克隆思路 #

你要克隆的是那个包含两个输入框的.row元素对吧？咱们一步步来：

• 选择并克隆元素：用.clone()方法，需要连元素上的事件处理程序一起克隆的话，就加个true参数（也就是深克隆）。
• 处理重复ID：你的原代码里有id="numero"，页面上ID必须唯一，克隆后得修改这个ID，不然会导致JS选择元素出错。
• 清空表单值：克隆出来的输入框会带着原元素的值，最好清空一下，让新行是空白状态。
• 添加到页面：把克隆好的元素放到你想要的位置，比如.modal-body里面。

具体代码示例 #

假设你的HTML结构补全后是这样的：

<div class="modal-body">
  <div class="row">
    <div class="col-md-5 text-center">
      <b>N&uacute;mero Factura</b>
      <input type="number" class="form-control" id="numero"><br/>
    </div>
    <div class="col-md-2 text-center"> -o- </div>
    <div class="col-md-5 text-center">
      <b>N&uacute;mero Remisi&oacute;n</b>
      <input type="number" class="form-control" id="remision">
    </div>
  </div>
</div>
<!-- 加个按钮触发克隆操作 -->
<button id="cloneRowBtn" class="btn btn-secondary">添加新行</button>

对应的jQuery代码：

// 给按钮绑定点击事件，触发克隆
$('#cloneRowBtn').click(function() {
  // 选中第一个row作为克隆模板
  const originalRow = $('.modal-body .row').first();
  // 深克隆（包含元素上绑定的事件），不需要克隆事件就去掉true
  const clonedRow = originalRow.clone(true);
  
  // 处理克隆元素里的ID，避免重复
  clonedRow.find('input').each(function() {
    const oldId = $(this).attr('id');
    // 用随机数生成唯一后缀，也可以用时间戳或者计数器
    $(this).attr('id', `${oldId}-${Math.floor(Math.random() * 1000)}`);
    // 清空输入框的值
    $(this).val('');
  });
  
  // 把克隆的row插到原row的后面，也可以用append放到modal-body最后
  originalRow.after(clonedRow);
});

几个关键细节说明 #

• 浅克隆vs深克隆：clone()是浅克隆，只克隆元素结构，不克隆事件；clone(true)是深克隆，会把元素上绑定的事件和数据一起克隆。
• 事件委托的优势：如果你用的是事件委托（比如$(document).on('change', '.form-control', function(){})），那不管怎么克隆新元素，事件都会自动生效，不需要用深克隆也可以。
• ID优化建议：如果你的代码里不需要用ID来操作元素，最好把ID换成类，比如把id="numero"改成class="numero-input"，这样克隆后就不用改ID了，操作起来更方便。

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