Does jQuery clone() Copy Event Handlers?

The jQuery clone() method creates a deep copy of matched DOM elements, but by default, it does not copy event handlers or data associated with the original element. However, developers can enable event copying by passing boolean arguments to the method. This article explains how the clone() method handles event listeners, how to ensure events are preserved, and how to handle events on nested child elements.

Default Behavior of .clone()

When invoked without arguments, $(selector).clone() copies the DOM structure, text nodes, and HTML attributes of the selected element. It does not transfer any event handlers attached via jQuery (such as .on(), .click(), or .bind()), nor does it copy jQuery data stored via .data().

// Creates a clone without event handlers
var copiedElement = $("#myButton").clone();

If #myButton had a click handler attached, clicking copiedElement will produce no response because the listener was left behind on the original.

Copying Event Handlers with withDataAndEvents

To copy event handlers along with the element, pass true as the first argument to the .clone() method:

// Copies the element along with its event handlers and data
var copiedElement = $("#myButton").clone(true);

Setting withDataAndEvents to true instructs jQuery to duplicate all event handlers and custom data attached to the target element onto the new copy.

Handling Nested Child Elements

The clone() method accepts an optional second boolean parameter, deepWithDataAndEvents, which determines whether the event handlers and data of the cloned element's children should also be copied:

$(selector).clone(withDataAndEvents, deepWithDataAndEvents);

• clone(true): Copies event handlers for the root element and all of its descendants. The second parameter defaults to the value of the first parameter.
• clone(true, false): Copies event handlers and data for the root element only, ignoring event handlers on any child elements.
• clone(false): The default setting. Copies neither root nor child event handlers.

Delegated Event Handlers as an Alternative

If your application frequently creates dynamic elements, relying on .clone(true) can sometimes lead to unnecessary memory usage. An alternative approach is event delegation using $(document).on() or delegating to a static parent element:

$(document).on("click", ".my-button", function() {
    // Action runs for both original and future cloned elements
});

When using delegated event listeners, elements cloned with standard .clone() will still respond to events because the listener is bound to an ancestor element rather than the element itself.