jQuery clone es uno de los métodos más prácticos de jQuery y nos permite clonar un conjunto de nodos DOM. La operación en un principio es muy sencilla pero tiene algunas peculiaridades. Vamos a empezar con lo más elemental, usar jQuery clone para copiar un bloque de nodos.
Para ello nos vamos a construir el siguiente bloque de código que contiene unos botones.
<html>
<head>
<style type="text/css">
#origen {
padding:10px;
border: 1px solid black;
margin:10px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button(:not('#clonar')").click(function() {
alert("has pulsado");
});
$("#origen").click(function() {
alert("pulsando zona para clonar");
});
$("#clonar").click(function() {
$("#origen").clone().appendTo("#destino");
});
});
</script>
</head>
<body>
<input type="button" value="clonar" id="clonar">
<div id="origen">
<input type="button" value="pulsar" id="botonPulsar1"/>
<div id="zona">
<p>
<input type="button" value="pulsar2" id="botonPulsar2"/>
</p>
</div>
</div>
<div id="destino">
</div>
</body>
</body>
</html>
El código nos prepara una zona para clonar elementos:
Si pulsamos sobre la zona se lanzara un evento que muestra un mensaje de alerta
Cuando pulsamos sobre cada uno de los botones nos mostrará el mensaje de botón pulsado y adicionalmente el mensaje de estar en la zona para clonar.
El siguiente paso es invocar al botón de “clonar” y duplicar los elementos :
jQuery clone (data y eventos)
Para nuestra sorpresa la nueva zona que hemos generado no responderá a ningún evento. Esto puede parecer curioso al principio pero se trata de una optimización de jQuery a la hora de copiar el árbol DOM. Para solventar este problema deberemos pasar al método “clone” un parámetro adicional (true):
$("#origen").clone(true).appendTo("#destino");
Esto conseguirá que se copien también los eventos del nodo principal que estamos clonando. Por lo tanto al pulsar sobre la nueva zona saldrá el mensaje :
Sin embargo no ocurrirá lo mismo con los botones que seguirán sin mostrar “has pulsado”. Para conseguir que también los nodos hijos clonen todos los eventos deberemos usar:
$("#origen").clone(true,true).appendTo("#destino");
Ahora sí que todo funcionara de la forma correcta.
Conclusiones
El método clone de jQuery soporta dos parámetros. El primero si pasamos true nos clona el nodo con sus eventos y el segundo hace lo mismo con todos sus nodos hijos. Por último recordar que estos parámetros también afectan a los datos almacenados con el método data() en los diversos nodos.
Otros artículos relacionados: jQuery On/Off , JQuery data , JQuery WrappedSet
[…] artículos relacionados : jQuery clone , jQuery […]