2009-04-20 9 views
19

Cuando I replaceWith un elemento para sacar uno del DOM, entonces replaceWith vuelve, los eventos registrados no se activan. Necesito que los eventos permanezcan intactos.Eventos que no se registran después de reemplazarWith

Aquí es 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); 
    }); 

Live demo

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

+1

¿Terminó usando la función de volver a adjuntar un evento, o alguna vez logró que los eventos en vivo funcionen? Estoy haciendo exactamente lo mismo, y me encantaría aprender de su experiencia. –

+0

@Erick T, lo siento, pero sinceramente no lo recuerdo. Hice esta pregunta hace casi dos años. Creo que el uso de '$ .fn.live' no funcionó porque estaba tratando con elementos reales, no con un selector. ('$ .fn.delegate' (que no existía entonces) puede funcionar para usted como una alternativa 'en vivo'.) Debido a la respuesta que seleccioné, supongo que terminé volviendo a adjuntar el controlador de eventos. También puede probar la clonación profunda del elemento (que IIRC puede mantener los controladores de eventos en la última jQuery). – strager

Respuesta

11

Porque cuando reemplaza el elemento original, se eliminan los eventos vinculados a él. Tendrá que volver a colocar el manejador de eventos en clickoriginal 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); 
}); 
+2

Ojalá hubiera una manera automática/elegante de hacer esto. Supongo que esta solución tendrá que hacer. – strager

+1

@strager: puede probar la sugerencia de eventos en vivo de Matt, o implementar una versión específica para sus propios fines. Hay * efectos secundarios serios (y desagradables) en * ciertos navegadores * si no se separan los eventos de los elementos separados, por lo que realmente quiere que funcione de esta manera. – Shog9

+0

Esto no tiene sentido. Los elementos pueden tener eventos sin estar adjuntos al DOM, entonces, ¿por qué eliminarlos del DOM eliminaría los eventos? Debe haber algunas decisiones específicas del rendimiento, así que bien ... – Alex

3

live events son lo que busca

+0

Mayo ser lo que necesito Lo miraré. – strager

+0

Parece que no funciona. Impar. = S – strager

+1

ya no funciona a partir de jQuery 1.9 – YaDa

4

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

Puede utilizar live()bind() y eventos, 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); 
     }); 
}); 
}); 

caso -Live funciona con jQuery 1.3 y superior.

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

Cuestiones relacionadas