如何克隆携带按钮属性的div，当前jQuery克隆代码是否存在问题？

• ID重复冲突：HTML规范要求同一页面内id属性必须唯一，你原代码里的dynamicsegment容器、start和stop按钮都绑定了固定id，克隆后页面会出现多个相同id的元素，会导致选择器匹配异常、样式渲染错误等问题。
• 事件不会默认克隆：jQuery的clone()方法默认参数为false，不会复制原元素绑定的事件处理程序，你克隆出来的新按钮点击后不会触发原来的显隐逻辑。
• 原有事件绑定规则不支持动态元素：你原代码用$('#start').click()的方式直接绑定事件，只会对页面初始化时已存在的元素生效，后续动态克隆生成的按钮不会被绑定到该事件。

修复方案 #

1. 优先使用类选择器替换id选择器，改用事件委托绑定逻辑 #

修改HTML结构，把id替换为class，避免唯一属性冲突：

<div class="dynamicsegment">
      <button type="button" class="start-btn">Star</button>
      <button type="button" class="stop-btn">Stop</button>
 </div>
<div id="copieddiv"></div>

修改JS逻辑为事件委托，绑定到页面不会被动态修改的上层容器（这里用document演示，你可以替换为更靠近元素的固定父容器）：

// 事件委托写法支持所有动态生成的匹配元素
$(document).on('click', '.start-btn', function(){
    $("#stopdiv").hide();
    $("#startdiv").show();
}); 
$(document).on('click', '.stop-btn', function(){
    $("#stopdiv").show();
    $("#startdiv").hide();
});

// 克隆代码可以直接使用，不需要额外处理事件绑定
$(".dynamicsegment").clone().appendTo("#copieddiv");

2. 如果你必须保留id属性，需要在克隆后重设唯一id #

如果业务场景要求必须用id，克隆时需要给新生成的元素和内部按钮设置唯一标识，同时开启事件克隆参数：

let cloneIndex = 1;
let newSegment = $("#dynamicsegment").clone(true) // 传true参数克隆绑定的事件
  .attr('id', `dynamicsegment_${cloneIndex}`);
// 重设内部按钮id
newSegment.find('#start').attr('id', `start_${cloneIndex}`);
newSegment.find('#stop').attr('id', `stop_${cloneIndex}`);
newSegment.appendTo("#copieddiv");
cloneIndex++;

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