Twitter bootstrap tab "tab“方法在ajax加载某些页面内容后不起作用

Question

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

更新

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

这是通过ajax添加新选项卡的javascript代码

$("#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);

添加新选项卡后，我尝试使用以下命令切换到该选项卡

$("#" + tabType + " a").last().tab("show");

但这并不管用。

Answer 1

在这一行上：

$("#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创建变量来测试您的代码，通过上面提到的微小更改，它对我有效。但是我不能得到和你一样的错误(element没有方法标签)，所以如果这对你仍然不起作用，那一定是其他的原因，你需要发布更多的代码。

Answer 2

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

我使用jquery加载了一个页面，该页面还包含$("#" + tabType + "-pane").load(tabUrl);、head、body元素，并且还加载了jQuery.这就造成了这个问题。它与给定here的问题有关

现在，我更改了加载页面的内容，它只加载所需的基本内部元素，而不加载html、head、script、body等标记。

这让我头疼了一整天。感谢上帝，我终于把它修好了。

编辑

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