Home/ Questions/Q 942735
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T22:19:21+00:00

I tried creating a disembodied DOM element with jQuery (I avoid ever touching the

  • 0

I tried creating a disembodied DOM element with jQuery (I avoid ever touching the DOM directly w/o going through jQuery, so I do treat their wrapped sets and the DOM elements underneath somewhat equivalently) and applying .tabs() to it, and only later adding the element into the DOM. The tabs kind of worked and kind of didn’t. It seemed as if (from a guess) perhaps event handlers had been messed up. Clicking on a tab highlighted it but did nothing. The non-currently-selected tab content was all shown. It was a weird effect.

I changed just one thing– I attached the disembodied element into the actual DOM tree first before calling .tabs(). Everything worked fine.

This actually fixed my immediate practical problem, because I did some more reading and realized that my whole motivation for making disembodied elements was based on a subtle misconception about how execution works in the browser between JavaScript and the DOM rendering. (I didn’t realize that the renderer would not regain control until the JavaScript had finished, which makes a lot more sense in retrospect– I’m sure a real multithreaded sort of approach would be a concurrency nightmare for browser makers…)

Anyway, that still leaves a very interesting theoretical question. What’s the deal? What’s the difference between the disembodied element and the attached one? How does jQuery UI play into that? I’d like to understand this stuff on a deeper level.

(I couldn’t find anything with a few cursory Google searches. Not surprised, since it seems that when you correct the misconceptions I had, running jQuery UI operations on disembodied elements is pretty pointless in practice.)

Here’s some 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();
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that when the tabs code is searching for the panels for each tab it does a selector search on the body not the current element. This works when the tabs are already in the document but not when they are not.

    The fix is easy. Just change this line in the _tabify function

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

    to

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

    I have submitted a ticket to make this change in jQuery UI.
    http://dev.jqueryui.com/ticket/5857

    • 0