jQuery détacher du contenu avec des événements?

Question

Ma question est la suivante: pourquoi l'événement click sur le troisième div n'est-il plus déclenché, après que j'ai détaché les éléments et les ai rajoutés? Les événements ne sont pas conservés.

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

exemple: http://jsfiddle.net/sCJfc/

Answer 1

detach() est de ne pas blâmer ici.

Vous effectuez une copie du balisage interne de l'élément conteneur et vous détachez les éléments créés à partir de cette copie. Ces éléments ne font pas partie du DOM pour commencer, et n'auront en effet aucun gestionnaire enregistré sur eux.

Essayez d'écrire:

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

Au lieu de:

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

Answer 2

Essayez le clonage des éléments enfants, de les enlever et de les ajouter en arrière en utilisant le clone.

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

container.append(detachedContent); 

de travail Exemple:http://jsfiddle.net/sCJfc/2/