jQuery - sự kiện `on` không hoạt động sau jQuery.replaceWith

Question

Tôi muốn có một liên kết như thế này: Khi được nhấp, nó thay đổi thành văn bản, khi chuột ra khỏi văn bản, nó sẽ trở về liên kết.

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

Mã này chỉ hoạt động lần đầu tiên. Dường như $("a").on("click",function(){}) không hoạt động sau replaceWith.

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

Tôi đang sử dụng jQuery 1.10.1 và đã thử nghiệm cả FF và Chrome. Hãy giúp tôi.

Answer 1

Thay

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

bởi

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

vì vậy bạn có thể sử dụng các sự kiện giao. Làm như vậy, xử lý của bạn sẽ được áp dụng cho các yếu tố neo tương lai có thể được tạo ra và đây là những gì bạn cần tính đến tài khoản mà bạn đang loại bỏ neo từ tài liệu khi thực hiện replaceWith

DEMO

Thông tin chi tiết về các sự kiện giao here (kiểm tra mục "Sự kiện trực tiếp và được ủy quyền")

Answer 2

Khi tài liệu ban đầu tải tài khoản của bạn xem a thẻ cho một lần nhấp. Nhưng khi thẻ a được thay thế bằng thẻ mới, thẻ không còn xem thẻ mới nữa.

Tôi sẽ khuyên bạn nên đặt một div xung quanh liên kết của bạn và có jQuery xem cho tất cả các nhấp chuột liên kết trong div. Như thể hiện trong ví dụ của tôi.

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

Các jQuery "vào" công trình, nhưng vì nó là một liên kết vì vậy khi bạn nhấp vào nó sẽ liên kết đến nơi khác.

Dưới đây là một fiddle: http://jsfiddle.net/joydesigner/4f8Zr/1/

Một lý do khác có thể là sử dụng mã $ replace.replaceWith ($ lnk) của bạn, bởi vì $ lnk là thế này. Vì vậy, nó có nghĩa là nó vẫn sẽ sử dụng cùng một văn bản và liên kết.

Đây là mã:

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

});