Question

Can we copy / clone an HTML section including all the event handlers attached to it?

To simplify the concept, assume I have a <div> which triggers alert() upon mouse click. I’d like to duplicate that <div> and also the handler associated with it; thus, upon click, the duplicated <div> also should trigger an alert. I could copy alright but the handlers don’t seem to be duplicated correctly. Here’s the jsFiddle sample.

Thank you.

Answer 1

Use .clone(true) instead of .clone().

---

$(function() {
    $(".clickme").click(function() { alert("I am clicked!"); });

    $("a").click(function() {
        $("#clickme-1").clone(true).attr("id", "").appendTo("#container");
    });
});

http://jsfiddle.net/KHbuh/1/

---

This clones all associated jQuery data as well, including handlers.