Pourquoi certaines opérations de l'interface utilisateur jQuery échouent-elles sur les éléments DOM désincarnés?

Question

J'ai essayé de créer un élément DOM désincarné avec jQuery (j'évite de toucher directement le DOM sans passer par jQuery, donc je traite leurs ensembles encapsulés et les éléments DOM en dessous de manière équivalente) et en y appliquant .tabs() et seulement plus tard en ajoutant l'élément dans le DOM. Les onglets de genre travaillé et genre de pas. Il semblait que, d'après une supposition, les gestionnaires d'événements avaient peut-être été foirés. En cliquant sur un onglet l'a mis en évidence mais n'a rien fait. Le contenu de l'onglet non sélectionné était affiché. C'était un effet étrange.

J'ai simplement changé une chose - J'ai d'abord attaché l'élément désincarné dans l'arborescence DOM avant d'appeler .tabs(). Tout a bien fonctionné. Cela a effectivement résolu mon problème pratique immédiat, parce que j'ai lu plus et réalisé que toute ma motivation pour faire des éléments désincarnés était basée sur une idée fausse subtile sur la façon dont l'exécution fonctionne dans le navigateur entre JavaScript et le rendu DOM. (Je ne savais pas que le moteur de rendu ne reprendrait pas le contrôle tant que le JavaScript n'aurait pas fini, ce qui est beaucoup plus sensé en rétrospective - Je suis sûr qu'une véritable approche multithread serait un cauchemar de concurrence pour les créateurs de navigateurs ... Quoi qu'il en soit, cela laisse toujours une question théorique très intéressante. Quel est le problème? Quelle est la différence entre l'élément désincarné et l'élément joint? Comment jQuery UI joue-t-il là-dedans? J'aimerais comprendre ce genre de choses à un niveau plus profond.

(je ne pouvais pas trouver quoi que ce soit avec quelques recherches Google cursives. Pas surpris, car il semble que lorsque vous corriger les idées fausses que j'ai eu en cours d'exécution, les opérations jQuery UI sur des éléments désincarnés est assez inutile dans la pratique.)

Voici quelques code:

// doesn't work right 
var disembodied = $('<div>.......html goes here....</div>'); 
$(disembodied).tabs(); 
$('div#receptacle').append(disembodied); 

// does work right 
var disembodied = $('<div>.......html goes here....</div>'); 
$('div#receptacle').append(disembodied); 
$(disembodied).tabs(); 

Answer 1

le problème est que lorsque le code est à la recherche onglets pour les panneaux pour chaque onglet, il effectue une recherche de sélection sur la body pas l'élément courant. Cela fonctionne lorsque les onglets sont déjà dans le document mais pas quand ils ne le sont pas.

La solution est simple. Il suffit de changer cette ligne dans la fonction _tabify

self.panels = self.panels.add(self._sanitizeSelector(href)); 

à

self.panels = self.panels.add(self._sanitizeSelector(href), self.element); 

J'ai soumis un ticket pour faire ce changement de jQuery UI. http://dev.jqueryui.com/ticket/5857