События не регистрируются после замены с

Question

Когда я 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. Однако обработчик щелчков больше не работает (где, я думаю, он должен).

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

Answer 2

ОБНОВЛЕНИЕ : 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 и выше.

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

Answer 3

живые события - это то, что вы ищете