在某些页面内容的ajax加载后,Twitter引导选项卡“选项卡”方法无法正常工作

时间:2013-02-04 13:40:14

标签: ajax jquery twitter-bootstrap tabs

我在工作中使用twitter bootstrap。 “标签”方法 (即; $("a element under tab li").tab("show"))完全切换到jQuery选择器指定的新选项卡,直到完成ajax加载。当我使用jQuery append创建新标签时,按jQuery load加载其窗格内容并尝试使用标签切换到该新标签(“show”)它会给出错误元素没有方法{{1} }

更新

tab

这是通过ajax

添加新标签的javascript代码
    <div class="tabbable">
      <ul class="nav nav-tabs" id="tab-set">
        <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
        <li><a data-toggle="tab" class="ajax" href="test.html">tab 4 - ajax</a></li>
      </ul>
      <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab-pane active"> tab 1 content </div>
        <div id="tab2" class="tab-pane"> tab 2 content </div>
        <div id="tab3" class="tab-pane"> tab 3 content </div>
      </div>
    </div>

添加新标签后,我尝试使用

切换到该标签
$("#tab-set").append("<li id='"+tabType+"'><a href='#" + tabType +
       "-pane' data-toggle=\"tab\"> " + tabName + "</a></li>");

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");
$("#" + tabType + "-pane").load(tabUrl);

但这不起作用。

2 个答案:

答案 0 :(得分:2)

在这一行:

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

你有#tab-content,但你的div实际上有一类tab-content,而不是id。所以需要:

$(".tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

我通过为tabType,tabName和tabUrl创建变量来测试你的代码,它适用于我上面提到的那个微小的变化。但是我无法得到与你相同的错误(元素没有方法选项卡)所以如果这仍然不适合你,那么还有其他事情发生,你需要发布更多的代码。

答案 1 :(得分:1)

是的,我现在遇到了麻烦。

我正在使用$("#" + tabType + "-pane").load(tabUrl); na加载页面,该页面还包含html,head,body元素,并且还在其中加载了jquery。这造成了问题。它与here

给出的问题有关

现在我改变了加载页面的内容,它只加载了所需的基本内部元素,没有像html,head,script,body等标签。

这让我头疼了一整天。感谢上帝,我终于解决了它。

修改

甚至不需要删除所有元素。只需要注意不要再从加载页面加载jquery(通过$(“#”+ tabType +“ - pane”)加载.load(tabUrl);)。