Question

Follow jQuery API

.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

Answer 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);