我正在通过 Ajax 将一些 HTML 加载到包含一个新的可选项卡元素的页面中。唯一的问题是选项卡不起作用,因为引导程序已经初始化。因此,我尝试了以下代码,该代码正确地针对包含使用 jQuery 的选项卡的预期 ul。但是,该选项卡没有初始化。
这是 HTML(在 DOM 初始化后通过 AJAX 加载到页面中):
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-fixes-27" data-toggle="tab">One</a></li>
<li class=""><a href="#tab-final-27" data-toggle="tab">Two</a></li>
<li class=""><a href="#tab-orig-27" data-toggle="tab">Thre</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-fixes-27">
<p>Conten1</p>
</div>
<div class="tab-pane" id="tab-final-27">
<p>Conten2</p>
</div>
<div class="tab-pane" id="tab-orig-27">
<p>Conten3</p>
</div>
</div>
</div>
然后我的javascript:
$('.nav-tabs').tab();
似乎从我读到的(http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/)应该初始化选项卡,但它没有做任何事情。
问题是,尽管初始化了选项卡,但当我单击它们时没有任何反应。即使我使用 .tab('show') 定位特定选项卡并且它确实显示正确。当我单击选项卡时仍然没有任何反应。
此外,如果我在事后添加它们并附加,这些选项卡似乎工作得很好(请参阅http://jsfiddle.net/HLj4N/9/,它在单击按钮后将上面的 HTML 附加到 div)。似乎有人 bootstrap.js 在添加时已经对其进行了初始化。
关于为什么单击选项卡无济于事的任何想法?