jQuery - L'evento `on` non funziona dopo jQuery.replaceWith

Question

Desidero un collegamento come questo: Quando viene fatto clic, cambia in testo, quando esce il mouse dal testo, torna al collegamento.

HTML:

<a href="#">click me and change to text</a> 

JS:

$("a").on('click',function(){ 
     var $lnk = $(this); 
     var $replace = $('<span>'); 
     $replace.text($lnk.text()); 
     // Link to Text 
     $lnk.replaceWith($replace); 
     // Text to Link 
     $replace.one('mouseout',function(){ 
      $replace.replaceWith($lnk); 
     }); 
     return false; 
    }); 

Il codice funziona solo la prima volta. Sembra che $("a").on("click",function(){}) non funzioni dopo replaceWith.

violino: http://jsfiddle.net/uABC9/4/

Sto usando jQuery 1.10.1 e testato sia FF e Chrome. Per favore aiuto.

Answer 1

Sostituire

$("a").on('click',function(){ 

da

$(document).on('click','a',function(){ 

in modo da poter utilizzare gli eventi delegati. In questo modo, il gestore si applicherà per i futuri elementi di ancoraggio che potrebbero essere creati e questo è quello che serve tenendo conto che si sta rimuovendo l'ancora da un documento durante l'esecuzione replaceWith

DEMO

Maggiori dettagli sugli eventi delegati here (consultare la sezione "Eventi diretti e delegati")

Answer 2

Quando il documento carica originariamente guarda il tag a per un clic. Ma quando il tag a viene sostituito con uno nuovo, non si guarda più il nuovo tag.

Vorrei raccomandare di mettere un div intorno al tuo link e avere jQuery watch per tutti i clic di link all'interno del div. Come mostrato nel mio esempio.

HTML

<div id="test"> 
    <a href="#">click me and change to text</a> 
</div> 

jQuery

$("#test").on('click','a',function(){ 
    var $lnk = $(this); 
    var $replace = $('<span>'); 
    $replace.text($lnk.text()); 
    // Link to Text 
    $lnk.replaceWith($replace); 
    // Text to Link 
    $replace.one('mouseout',function(){ 
     $replace.replaceWith($lnk); 
    }); 
    return false; 
}); 

http://jsfiddle.net/uABC9/8/

Answer 3

Il jQuery "on" opere, ma perché è un link in modo che quando si fa clic si collegherà ad un altro luogo.

Ecco un violino: http://jsfiddle.net/joydesigner/4f8Zr/1/

Un altro motivo potrebbe essere l'utilizzo di codice $ replace.replaceWith ($ LNK), becuase $ lnk è questo. Quindi significa che continuerà a utilizzare lo stesso testo e link.

Ecco il codice:

$("a").on('click',function(){ 
    var $lnk = $(this), 
     $replace = $('<span>'); 

$replace.text($lnk.text()); 
// Link to Text 
$lnk.replaceWith($replace); 

// Text to Link 
$replace.one('mouseout',function(e){ 
    $replace.replaceWith('<a href="#">test</a>'); 
}); 

e.preventDefault(); 
return false; 

});