I tried to clone tabs element to different location by using clone(true) method but it didn’t work properly. For example, I can not switch between tabs in ‘#here’ div.
Here is the html content:
<body>
<div id="tab1" class="tabs" style="height:100px; width:300px">
<ul></ul>
</div>
<div id="here" style="height:100px; width:300px"></div>
</body>
and this is the code which I tried:
$('#tab1').tabs({ closable: true });
$('#tab1').tabs('add', '#' + 1, 'test');
$('#tab1').tabs('add', '#' + 2, 'test');
var tmp = $('#tab1').clone(true);
tmp.appendTo($('#here'));
I don’t want to copy html tags and then reinitialize the tabs element like this:
$('#tab1').tabs({ closable: true });
$('#tab1').tabs('add', '#' + 1, 'test');
$('#tab1').tabs('add', '#' + 2, 'test');
$('#here').html($('#tab1').html());
$('#here').tabs();
I actually want to relocate tabs, which has ui elements like jqgrid, jstree in it, to different div dynamically and the above code is not appropriate solution.
thanks for your attention.
If you want to reallocate i think you could use detach() so that you can reappend the elements later