Question

I have the following tabs on certain div on my page: (this code is generated dynamically based on predefined conditions, so the content will never be the same, the only thing that I know is that there will always be a tabsContainerDiv to initialize the control)

<div id="parentContainer">
    <div id="tabsContainerDiv">
        <ul>
            <li><a href="#page1">Pag. 1-</a></li>
            <li><a href="#page2">Pag. 2-</a></li>
        </ul>

        <div id="page1" name="page1">
            <span style="left:120px; top:4px" class="Label" id="Pg1Cap1">TITLE</span>
            <span style="left:1056px; top:4px" class="Label" id="Pg1Cap2"></span>
            <span style="left:216px; top:28px" class="Label" id="Pg1Cap3">OTHER CONTENT</span>
            <span style="left:1056px; top:28px" class="Label" id="Pg1Cap4"></span>
        </div>
        <div id="page2" name="page2">
            <input type="text" readonly="readonly" maxlength="10" size="10" class="Field" id="object_identifier" />
        </div>

    </div>
</div>

Then, I initialize the UI and it works perfect:

$('#tabsContainerDiv').tabs();

Now, I need to COPY those TABS into a div on a Dialog control, I already have there another div, so I do this:

$('#htmlEditor').html($('#parentContainer').html());

And that also works, in the way that it copies the Tabs content (also including the classes that jquery UI adds to make it look like a TAB structure), the problem is that I wish I could copy the TABS including the behaviour, I mean, without needing the re-create the tabs with $('#tabsContainerDiv').tabs();,

Is there a way to do this? maybe using the .live() or something to say: every time we detect the presence of an element with the id tabsContainerDiv, attach the .tabs() event.

Any help or suggestion would be appreciated. Thanks.

Answer 1

Try using clone(). It has a parameter to specify whether it should include the events when cloning elements.

var tabs = $('#parentContainer #tabsContainerDiv').clone(true);
$('#htmlEditor').append(tabs);

Depending on the plugin this may cause issues where it sees both sets of tabs as one. You may still be best off with your current method.