gpt4 book ai didi

javascript - jquery UI 不会在新的 DOM 元素上执行

转载 作者:行者123 更新时间:2023-12-02 18:25:04 25 4
gpt4 key购买 nike

我正在 Chrome 扩展中使用 jquery UI 中的选项卡。然而,在插入一些新元素并运行

后,它适用于现有的 DOM 元素
$(function(){
$( "div" ).tabs();
});

同样,新元素不会像 jquery 选项卡那样出现。

我的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;从控制台获取 选项卡结构

  <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>

最佳答案

您需要调用refresh()改变DOM结构后的方法:

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

注意,这假设您已经事先初始化了插件

关于javascript - jquery UI 不会在新的 DOM 元素上执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18472366/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com