2013-03-05 11 views
1

Мой вопрос: почему не происходит событие click на третьем отключенном div, после того как я отсоединил элементы и вернул их обратно? События не сохраняются.jQuery отсоединить контент с помощью событий?

var test = (function($, undef) { 
    var t = {}; 
    t.test = function(){ 
     var container = $('<div/>').appendTo('body');   
     $('<div/>', { 
      'class' : 'some', 
      'text' : 'text' 
     }).appendTo(container);   
     $('<div/>', { 
      'class' : 'some', 
      'text' : 'text' 
     }).appendTo(container);   
     $('<div/>', { 
      'class' : 'some', 
      'text' : 'text', 
      'click' : function(){ 
       console.log("ahoy"); 
      } 
     }).appendTo(container);   
     $('<div/>', { 
      'class' : 'some', 
      'text' : 'text' 
     }).appendTo(container);   
     var content = container.html(); 
     var detachedContent = $(content).detach(); 
     container.empty();   
     //setTimeout(function(){ 
      container.append(detachedContent); 
     //}, 2000);   
    };  
    return t; 
})(jQuery); 
test.test(); 

пример: http://jsfiddle.net/sCJfc/

ответ

1

detach() не виноват здесь.

Выполняется копия внутренней разметки контейнера, и вы отделяете элементы, созданные из этой копии. Эти элементы не являются частью DOM для начала и на самом деле не будут иметь обработчика, зарегистрированного на них.

Try записывания:

var detachedContent = container.children().detach(); 

Вместо:

var content = container.html(); 
var detachedContent = $(content).detach(); 
+0

Да, это сказано в .html() API. Благодаря :) – test

0

Попробуйте клонировать дочерние элементы, удаляя их, а затем добавить их обратно с помощью клона.

var detachedContent = $(container).children().clone(true); 
console.log(detachedContent); 
container.empty(); 

container.append(detachedContent); 

Рабочий пример:http://jsfiddle.net/sCJfc/2/