jquery UI does not execute on new DOM element
Question
I'm using the tabs from jquery UI inside a chrome extension. It works on existing DOM element, however, after inserting some new elements and running
$(function(){
$( "div" ).tabs();
});
again, the new elements does not the jquery tabs appearance.
my html file:
<div id="tabs">
<h3 id = "tabId">Tab ID</h3>
<ul>
<li><a href="#0">Main Frame</a></li>
</ul>
<div id="0">
</div>
</div>
html after running the script; taken from the console TabStructure
<link rel="stylesheet" href="./jquery-ui-1.10.3/themes/base/jquery-ui.css">
<script src="./jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="./jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="./jquery-ui-1.10.3/demos/demos.css">
<script src="background.js"></script>
<script src="tabStructure.js"></script>
</head>
<body>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">
<!-- this works -->
<h3 id="tabId">Tab ID</h3>
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="0" aria-labelledby="ui-id-1" aria-selected="true"><a href="#0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Main Frame</a></li>
</ul>
<div id="0" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs ui-widget ui-corner-all ui-tabs-collapsible" role="tabpanel" aria-expanded="true" aria-hidden="false">
<p>Process ID : 130</p>
<ul> <!-- this part does not get processed by jquery ui-->
<li><a href="#18">Sub_Frame: 18</a></li>
<li><a href="#19">Sub_Frame: 19</a></li>
</ul>
<div id="18" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">Frame ID : 18</div>
<div id="19" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">Frame ID : 19</div></div>
</div>
</body></html>
2 answers
solution1
2 ACCPTED 2013-08-27 17:55:53
You need to call the refresh() method after changing the DOM structure:
$( "div" ).tabs( "refresh" );
Note, this assumes you've initialized the plugin beforehand
solution2
0 2013-08-27 17:57:41
You probably have to execute the refresh method of the plugin to take into account the new DOM elements added after initialization:
$('div').tabs('refresh');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.