События, не зарегистрированные после заменыWith

Когда я replaceWith элемент для вывода одного из DOM, затем replaceWith обратно, зарегистрированные в нем события не срабатывают. Мне нужно, чтобы события оставались неповрежденными.

Вот мой 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);
    });

Живая демонстрация

В демонстрации, когда вы нажимаете элемент, он заменяется другим элементом с помощью replaceWith. Когда вы нажимаете новый элемент, который заменяется исходным элементом с помощью replaceWith. Однако обработчик кликов больше не работает (где я бы подумал, что он должен).

Ответы

Ответ 1

Потому что, когда вы заменяете оригинальный элемент, события, связанные с ним, удаляются. Вам нужно будет повторно подключить обработчик событий click на original после вызова 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

UPDATE: live() и bind() устарели, в пользу on().

Вы можете использовать live() и bind(), это ваш новый код:

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

Событие -Live работает с jQuery 1.3 и upper.

- если вы хотите остановить распространение в прямом эфире, используйте die().