Eventos que no se registran después de replaceWith

Cuando lo replaceWith un elemento para sacar uno del DOM y luego replaceWith colocarlo, los eventos registrados en él no se replaceWith . Necesito que los eventos permanezcan intactos.

Aquí está mi 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); }); 

Demo en vivo

En la demostración, cuando hace clic en un elemento, se reemplaza con otro elemento utilizando replaceWith . Cuando hace clic en el nuevo elemento, se reemplaza con el elemento original utilizando replaceWith . Sin embargo, el manejador de clics ya no funciona (donde yo pensaría que debería).

Porque cuando reemplazas el elemento original, se eliminan los eventos vinculados a él. Tendrá que volver a conectar el controlador de eventos click en el original después de la llamada a 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); }); 

ACTUALIZACIÓN : live() y bind() han quedado en desuso, a favor de on() .

Puede usar los eventos live () y bind () , este es su nuevo código:

 $(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); }); }); }); 

-El evento Live funciona con jQuery 1.3 y superior.

-si desea detener la propagación en vivo use la función die () .

eventos en vivo son lo que estás buscando