It's not a case of just leaving data and events "in place" on the old element. Since you're *replacing* the element, the only way to do this would be to copy the data and events from the replaced element.

Since we've gone seven years without anyone requesting this, I think it's rare enough that you should just manage it in the app, either by using delegated events or re-attaching them.

Just for the record, I don't think it's that rare...

The need arises for example when implementing a 'wizard-like' navigation. You need to replace the contents of a node each time 'next' is clicked, but when 'back' is clicked you still want the original contents with their event handlers in place.

Just came across this issue, because I want to toggle content upon click whereas the toggle "switch" is part of the content. In this case, it would be useful to just replace one element with another without losing attached event handlers.

I also just came to this. Navigation using scroll fix headings, when the user scrolls to a point header.replaceWith(placeholder) and fix the heading, but event handlers get lost. Had to do header.before(placeholder).detach(). Not the end of the world I suppose.

I think the last comment meant to say the solution is

placeholder.insertBefore(header);

header.detach();

It doesn't make sense otherwise.

I too came across the requirement to keep events en-tacked using replaceWith. It seems as though this would be a very simple fix, no?

...this

jQuery( this ).remove();
parent.insertBefore( elem, next );

... would become

if ( detach ) {
	jQuery( this ).detach();
	parent.insertBefore( elem, next );
}

Then there could be two functions. One for detach and another for the normal replaceWith (both of which call the private function using the detach flag that actually does the work).

+1

See also #14181.

Duplicate of #14181.See the plugin in #14181. There is no reasonable way to add a boolean argument to .replaceWith() so the best solution is a new API, which given the rare need is best done as a plugin.

In case anyone arrives here as I did looking for a quick alternative to replaceWith() that keeps attached events, it can be done using a combination of existing functions in the current API:

this:

    old.replaceWith( new );

can be changed to:

    old.before( new ).detach();

Both return a handle to the removed element, so depending on the use case it should be pretty simple to change.