clone() in jQuery

Question

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

deepWithDataAndEvents A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

Here's my code:

HTML :

<div id="d1">Click this paragraph to increase text size.<p id="p1">This is another</p></div>
<button>Click me</button>

Javascript :

$("button").click(function(){
    var para = $("#d1:first").clone(true);
    $("body").append(para);
});
$("#d1").click(function(){
   $(this).animate({fontSize:"+=1px"});
});
$("#p1").click(function(){
   $(this).css({color:"green"});
});

When I click button, #p1 changes to be green . Follow api I use clone(true), deepWithDataAndEvents must be false and #p1 can't be affected . I use jQuery v1.8.2

So you want nothing to happen, when you click on cloned p1 or cloned d1 if I understand correctly? — Igor
– Igor, Commented Nov 11, 2012 at 10:58

Frédéric Hamidi · Accepted Answer · 2012-11-11 10:45:54Z

1

It looks like you misunderstood the part of the documentation that says:

deepWithDataAndEvents A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

Since you provided true in the first argument and you did not specify deepWithDataAndEvents, it will default to true, not false. To obtain the behavior you're looking for, you should actually write:

var para = $("#d1:first").clone(true, false);

answered Nov 11, 2012 at 10:45

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

clone() in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related