jQuery - `on`事件在jQuery.replaceWith後不起作用

Question

我想要一個這樣的鏈接： 當它被點擊時，它會改變爲文本，當鼠標移出文本時，它會返回鏈接。

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

的代碼只能第一次。似乎$("a").on("click",function(){})在replaceWith之後不起作用。

小提琴：http://jsfiddle.net/uABC9/4/

我使用jQuery 1.10.1和測試都FF和Chrome。請幫忙。

Answer 1

更換

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

通過

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

這樣你就可以使用委託的事件。這樣做，你的處理器將適用於可能創造未來的錨元素，這是你執行有關委派事件replaceWith

DEMO

更多細節時，需要考慮到什麼，你去除文檔中的錨帳戶here（查看「直接和委託事件」部分）

Answer 2

當文檔最初加載它看你的a標記點擊。但是當a標籤被替換爲新標籤時，它不再看新標籤。

我會推薦在你的鏈接上放一個div，讓jQuery監視div內的所有鏈接點擊。如我的例子所示。

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

「的」 作品jQuery的，但因爲它是一個鏈接，這樣當你點擊它就會鏈接到其他地方。

這裏是一個小提琴：http://jsfiddle.net/joydesigner/4f8Zr/1/

另一個原因可能是你的代碼中使用$ replace.replaceWith（$ LNK），監守$ LNK是這樣的。所以這意味着它仍然會使用相同的文字和鏈接。

下面是代碼：

$("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; 

}）;