Me gustaría clonar todo el div con las propiedades del botón. ¿Hay algún problema con mi código actual $("#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>La función de clonación copia todas las propiedades (como id, clase, atributo personalizado) del objeto de destino. Pero sus controladores de eventos no se copian.
Aquí está el código, pero no sugiero usar la identificación en el elemento clonado porque la identificación es única.
$('#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>