Question

I am trying to copy a div content from one place to another, for this I am using something like:

$('#newDiv').html($('#oldDiv').html());

The problem is that some child elements have events attached using the bind() jquery method. I would want to copy also those events to the new location.

Any idea about a way to do this “event copy”?

Answer 1

Description

You create dynamic content in the moment you copy the content.

You need jQuery .live() or delegate() method to bind events to dynamically created html.

Choose .live() or delegate() depending on the version of jQuery you are using.

.live() Available since jQuery 1.3. Attach an event handler for all elements which match the current selector, now and in the future.

.delegate() Available since jQuery 1.4.2. Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Check out my sample and this jsFiddle Demonstration

Sample

<div id="newDiv"></div>
<div id="oldDiv"><a>click me</a></div>​

​$("a").live("click",function() {
   alert("click"); 
});​
    
// copy content
$('#newDiv').html($('#oldDiv').html());

​

More Information

• jQuery.live()
• jQuery.delegate()
• jsFiddle Demonstration