Sự kiện không đăng ký sau khi thay thếWith

Question

Khi tôi replaceWith một yếu tố để đưa một trong DOM, sau đó replaceWith nó trở lại, các sự kiện đã đăng ký để nó không kích hoạt. Tôi cần sự kiện để giữ nguyên vẹn.

Dưới đây là Javascript tôi:

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

Trong bản demo, khi bạn nhấp vào một phần tử, nó được thay thế bằng một yếu tố khác sử dụng replaceWith. Khi bạn nhấp vào phần tử mới, phần tử mới được thay thế bằng phần tử gốc bằng cách sử dụng replaceWith. Tuy nhiên, trình xử lý nhấp chuột không hoạt động nữa (nơi tôi nghĩ là cần).

Answer 1

Vì khi bạn thay thế phần tử gốc, các sự kiện được liên kết với nó sẽ bị xóa. Bạn sẽ cần phải tái đính kèm xử lý sự kiện trên clickoriginal sau khi cuộc gọi đến 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); 
}); 

Answer 2

live events là những gì bạn đang tìm kiếm

Answer 3

CẬP NHẬT: live() và bind() đã bị phản đối, trong ủng hộ on().

Bạn có thể sử dụng live() và bind() sự kiện, đây là mã mới của bạn:

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

kiện -Live làm việc với jQuery 1.3 và cao hơn.

-nếu bạn muốn ngừng sử dụng chức năng tuyên truyền trực tiếp die().