如何克隆具有按钮属性的div

我想用按钮属性克隆整个div。我当前的代码$("#dynamicsegment").clone().appendTo("#copieddiv")?有问题吗

<div id="dynamicsegment">
<button type="button" id="start">Star</button>
<button type="button" id="stop">Stop</button>
</div>
<script>
$('#start').click(function(){
$( "#stopdiv" ).hide();
$( "#startdiv" ).show();
}); 
$('#stop').click(function(){
$( "#stopdiv" ).show();
$( "#startdiv" ).hide();
});

</script>

这是代码，但我不建议在克隆的元素上使用id，因为id是唯一的。

$('#start').click(function(){
$( "#stopdiv" ).hide();
$( "#startdiv" ).show();
}); 
$('#stop').click(function(){
$( "#stopdiv" ).show();
$( "#startdiv" ).hide();
});
$('#button').on('click', function(){
$(".cloned-element:last").clone().appendTo(".cloned-element:last");  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cloned-element" id="dynamicsegment">
<button type="button" id="start">Star</button>
<button type="button" id="stop">Stop</button>
</div>
<button id="button">Dublicate</button>

$('#start').click(function(){
$("#dynamicsegment").clone().appendTo('body');
$( "#stopdiv" ).hide();
$( "#startdiv" ).show();
}); 
$('#stop').click(function(){
$( "#stopdiv" ).show();
$( "#startdiv" ).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dynamicsegment">
<button type="button" id="start">Star</button>
<button type="button" id="stop">Stop</button>
</div>

clone函数复制目标对象的所有属性(如id、class、自定义属性)。但它的事件处理程序不会被复制。

https://api.jquery.com/clone/

将css ID更改为类。另外，当您附加新元素时，请检查它是否存在。在这个例子中，我假设已经有一个.cloned-elemnent


$(function(){

var $template = $('.dynamicsegment').clone()

$(template).appendTo(".cloned-element:last")
})

如果这有帮助，请告诉我：)

相关内容

最新更新

热门标签：