2013-08-27 17 views
0

我正在使用jQuery UI中的选项卡在一个Chrome扩展中。它适用于现有的DOM元素,但插入一些新的元素并运行后,新元素不会再出现jquery选项卡。jQuery UI不会在新的DOM元素上执行

我的html文件:运行该脚本后

<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;从控制台采取 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

'$(函数(){$ ( “分区”)选项卡()。你只需要执行1次*(在document.ready上)* ...你需要在插入新的div后执行'$(“div”)。tabs();' – abc123

回答

2

你需要改变DOM结构后致电refresh()方法:

$("div").tabs("refresh"); 

注意,这是假定你已经初始化插件事先

0

您可能必须执行插件的refresh方法,以考虑初始化后添加的新DOM元素:

$('div').tabs('refresh'); 

Documentation