Events not registering after replaceWith

jquery replacewith not working
jquery find and replace html
jquery replace text in div
replace class jquery
lightweight jquery
jquarry
jquery live
jquery version history

When I replaceWith an element to bring one out of the DOM, then replaceWith it back in, events registered to it do not fire. I need to events to remain intact.

Here's my Javascript:

var replacement = $(document.createElement('span'));
var original = $(this).replaceWith(replacement);

replacement
    .css('background-color', 'green')
    .text('replacement for ' + $(this).text())
    .click(function() {
        replacement.replaceWith(original);
    });

Live demo

In the demo, when you click an element, it is replaced with another element using replaceWith. When you click the new element, that is replaced with the original element using replaceWith. However, the click handler does not work any more (where I would think it should).

Because when you replace the original element, events bound to it are removed. You'll need to re-attach the click event handler on original after the call to replacement.replaceWith(original):

$(function() 
{   
   function replace() 
   {
      var replacement = $(document.createElement('span'));
      var original = $(this).replaceWith(replacement);

      replacement
         .css('background-color', 'green')
         .text('replacement for ' + $(this).text())
         .click(function() 
         {
            replacement.replaceWith(original);
            original.click(replace);
         });
   }

   $('.x').click(replace);
});

Click event not working after replaceWith, But for some reason it isn't responding to any click() events. Is this a bug? Or am i doing something wrong?? 1. Reply� Events not registering after replaceWith. When I replaceWith an element to bring one out of the DOM, then replaceWith it back in, events registered to it do not fireI need to events to remain intact. 65

UPDATE: live() and bind() have been deprecated, in favour of on().

You can use live() and bind() events, this is your new code:

$(function() {
$('.x').live('click', function() {
    var replacement = $(document.createElement('span'));
    var original = $(this).replaceWith(replacement);

    replacement
        .css('background-color', 'green')
        .text('replacement for ' + $(this).text())
        .bind('click', function() {
            replacement.replaceWith(original);
        });
});
});

-Live event works with jQuery 1.3 and upper.

-if you want to stop the live propagation use die() function.

.replaceWith(), This object refers to the element that has been removed from the DOM, not the new element that has replaceWith() method removes all data and event handlers associated with the removed nodes. As of jQuery 1.9, .after() , .before () , and . 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.

live events are what you are looking for

JavaScript Search Framework Events - Documentation, Register your Framework event handlers on the root HTML element of your search interface. querySelector("#search"); // This handler will be registered after all Downloading a component code chunks is a non-blocking process during which the queryBuilder.expression.parts[0].replace(/\$/g, ""); }); Coveo. init(root); });� PRO TIP: If you're trying to register for an event as an attendee, the process is not the same as creating an event. If you see "Event Details" followed by "Create Tickets" and "Additional Settings" on your screen, you are in the process of creating an event and not registering to attend an event.

Element: mouseup event, Examples. The following example uses the mousedown , mousemove , and mouseup events to allow the user to draw on an HTML5 canvas� Even though you are using .on() with event delegation syntax, it is not working as the element to which the event is binded is created dynamically. You are registering the handler to col-md-1 which is the parent of the delete button, but that element also is created dynamically so when

DOM Standard, If prefix is " xml " and namespace is not the XML namespace, then throw a If an event listener was registered for the span element, eventPhase attribute's method prevents event from reaching any registered event listeners after the Replace each string in nodes with a new Text node whose data is the� PRO TIP: Events with free tickets only will always reflect "Registration Event" language, no matter if "Ticketed Event" is selected. NOTE: If your eblink

replaceWith confusing behaviour with a jQuery set � Issue #3024 , How can one replace an element if not by usin. GitHub is home to over 50 million developers working together to host and @gibson042 - Actually map wouldn't work well since you will loose all the jQuery data and events� First, you need to setup Windows security auditing to monitor file access (and optionally logon) events. Of course, you should do it right after creating a shared folder and granting access to it (post factum setup won’t help you) . This article describes how to setup security auditing and audit file access and logon events.

Comments
  • Did you end up using the event reattachment, or were you ever able to get Live events to work? I am doing the exact same thing, and would love to learn from your experience.
  • @Erick T, I'm sorry, but I honestly cannot remember. I asked this question almost two years ago. I think using $.fn.live didn't work because I was dealing with actual elements, not a selector. ($.fn.delegate (which didn't exist then) may work for you as a live alternative.) Because of the answer I selected, I assume I did end up re-attaching the event handler. You may try deep cloning the element as well (which IIRC may keep event handlers in the latest jQuery).
  • I wish there were an automatic/elegant way of doing this. I guess this solution will have to do.
  • @strager: You could try Matt's live events suggestion, or implement a targeted version for your own purposes. There are serious (and unpleasant) side-effects in certain browsers if you fail to detach events from detached elements, so you really do want it to work this way.
  • This does not make sense. Elements can have events without being attached to the DOM, so why would removing them from the DOM remove the events? Must be some performance specific decisions, well well...
  • I would also point you to this alternative code to replace elements without losing the bound events:bugs.jquery.com/ticket/13400#comment:10
  • May be what I need. I'll look into it.