jQuery clone() example
jQuery clone() is used to create a copy of the matched elements. It also support a boolean parameter to indicate whether need to copy the event handlers and data along with the matched elements.
1. Clone the html elements
For example, you are going to clone the following html code.
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
Use clone() to create a copy of the above elements, and put the copied elements after the div tag that contains a class name of “smallBox”.
$('.smallBox').clone().insertAfter(".smallBox");
The result :
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
2. Clone the event handler
The next example will be cloning the button click event, you are going to copy the button that contains a id of ‘cloneButton1’.
<button id="cloneButton1">clone()</button>
<script type="text/javascript">
$("#cloneButton1").click(function () {
$('.smallBox').clone().insertAfter(".smallBox");
});
</script>
If you are using the default clone() or clone(false) method, it will copy the button element only, but not the click() event handler.
$('#cloneButton1').clone().insertAfter("#cloneButton1");
To copy the click() event handler along with matched elements, you should use clone(true).
$('#cloneButton1').clone(true).insertAfter("#cloneButton1");
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.smallBox{
padding:8px;
border:1px solid blue;
margin:8px;
}
.smallInnerBox{
padding:8px;
border:1px solid green;
margin:8px;
}
</style>
</head>
<body>
<h1>jQuery clone() example</h1>
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
<p>
<button id="cloneButton1">clone()</button>
<button id="cloneButton2">clone() button (default)</button>
<button id="cloneButton3">clone(true) button</button>
<button id="reset">reset</button>
</p>
<script type="text/javascript">
$("#reset").click(function () {
location.reload();
});
$("#cloneButton1").click(function () {
$('.smallBox').clone().insertAfter(".smallBox");
});
$("#cloneButton2").click(function () {
$('#cloneButton1').clone(false).insertAfter("#cloneButton1");
});
$("#cloneButton3").click(function () {
$('#cloneButton1').clone(true).insertAfter("#cloneButton1");
});
</script>
</body>
</html>
im using clone method for rows made of div tag while making calculations my parent row working correctly but in child row the calculated value is showing in my parent textbox. eventhough i changed clone index values and event true to my clone.
You dont have to do all of that binding/unbinding. The following seems to work ok for me…
var $lastItem = $(‘.smallBox’).last();
var $newItem = $lastItem.clone();
$newItem.insertAfter($lastItem);
Keep in mind, sometimes you need to use removeAttr(‘id’) when cloning and element. Personally, I always include it for uniform best practice sake and maintainability.
Is there a way we can clone a div and its contents just like we do on the same page and save it some kinda database, retrieve it on another page and append to another div in the new page?
What I am trying to do:
Create dynamically textboxes which user inputs values to, something like steps of a process(each textbox each task of the process).
Save these elements and values in a database.
When a user wants to view the created process in another page, show the textboxes with the values.
Any help is much appreciated
nice this one ,
but i have some different problem
i have maine row and it eliment i.e drop down list ,textbox and button
after clone this mainrow to $newRow
i need to get value from this $newRow txetbox and use it
how i get this value
The jQuery clone() Method creates a deep run time copy of set of matched DOM Elements to another location in the DOM elements and select the clones.
$(selector).clone(true|false)
Example of jQuery clone():
This is a first paragraph.
$(document).ready(function(){
$(“p”).clone().appendTo(“body”);
});
For more information:
http://www.namasteui.com/jquery-clone-method/
I want to create the number of clone of small box as per value supplied by input type=number.How to do it?
its creating 6 clones on 2nd click . please give solution..
Good
The problem is the i should do it for a website control panel, and to update the database with ajax every single item i duplicate…
Is it possible to clone via text input. For example I enter 3 number in text input and using onchange, it clones 3 times.
I have been surfing online greater than 3 hours lately, but I by no means found any interesting article like yours. It is lovely price enough for me. In my opinion, if all web owners and bloggers made excellent content as you did, the web will probably be a lot more helpful than ever before.
jQuery clone() example
One problem with that
next clone() clicks it makes multiple of previous boxes
But our need to make clone one one that means one box cloned one time on click
you can use
delete first unbind.bind 🙂
It help in my project
but i need above mention condition
I think the problem lies with the the fact that jquery is cloning An element say with class=”clone1″ the first time. Then when the button is clicked a second time it is cloning two class=”clone1″ so you end up with four elements instead of three.
My work around was to remove the class after cloning and the add the class back to the last child element. So it would look something like this:
$(“.cloneButton2”).click(function(){
$(‘.cloneButton1’).clone().insertAfter(“.cloneButton1”);
$(‘#contacting div’).removeClass(“cloneButton1”);
$(“#contacting div:nth-last-child(2)”).addClass(“cloneButton1”);
});
Hope this helps.
very nice example. helped me a lot.
Can we limit the cloning process for example – we can clone at most 3 times? after that clone button disappears.
i m new to jquery.
Sana
Its good but i want only one one div cloning and its creating multiple divs cloning i want one by one………………
there is a problem in the code as when u click the clone button for the first time it generates the box (which is ok.), but when it is clicked second time the code generates few more other box’s (at-least more than couple) rather it should generate 1-by-1.
cheers…
thanks for this. the jquery website doesnt mention clone(true) all that visibly, but this gave me the hint i needed to finish my mini project 🙂
Good to know it help, remember send me your mini project for viewing if possible 🙂
can i send to you my big project ?