在模式中通过AJAX添加引导选项卡时，引导选项卡不起作用

Question

我正在使用bootstrap 3.2.0并遇到以下问题：在我的主页上，我有一个按钮。单击此按钮可打开一个模式窗口。模态窗口进行API调用，并用AJAX调用的响应填充其内容。AJAX调用返回如下内容：

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabsFromAjax">
<li class="active"><a href="#one" role="tab" data-toggle="tab">ONE</a></li>
<li><a href="#two" role="tab" data-toggle="tab">TWO</a></li>
<li><a href="#three" role="tab" data-toggle="tab">THREE</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="one">this is tab 1</div>
<div class="tab-pane" id="two">this is tab 2</div>
<div class="tab-pane" id="three">this is tab 3</div>
</div>
<script>
$("#tabsFromAjax").tab();
</script>

但是，选项卡不起作用。点击"TWO"确实会更改选项卡本身（即上部），但不会在底部显示内容："这是选项卡2"。我想的都试过了。现在我开始怀疑这是否是3.2.0中的一个bug？

编辑/更新：我发现即使是简单的绑定在模态中也不起作用。我尝试用代码显示：

<div class="modal fade" id="formView" tabindex="-1" role="dialog" aria-labelledby="Detail" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $(".formShow").click(function(){
        $.ajax({
            type: "POST",
            url: "test.php",
            data: { id: 123 }
        }).done(function( msg ) {
            $(".modal-content").html(msg);
            $("#formView").modal();
        });
    });
});
-->
</script>

AJAX对test.php的调用只返回以下内容：

<div>
    <a href="#" id="testAnker">Foo</a>
</div>
<script type="text/javascript">
    $("#testAnker").click(function(){
        alert("click");
    });
</script>

点击"Foo"不会显示警报。

我在这里错过了什么？

Answer 1

尝试：

<script>
  $(function() {
    $("#tabsFromAjax").tab();
  });
</script>

Answer 2

当您通过ajax获取新数据时，请确保这一点。选项卡"id"与您开始使用的或下一个ajax调用使用的不同，请尝试将选项卡重新绑定到新的id。

如果你不这样做，你可能最终会将选项卡重新绑定到已经绑定到的第一个元素。

<script type="text/javascript">
$(document).ready(function(){
    $(".formShow").click(function(){
        var mid = 123;
        $.ajax({
            type: "POST",
            url: "test.php",
            data: { id: mid }
        }).done(function( msg ) {
            $(".modal-content").html(msg);
            $("#formView").modal();
            $("#tabsFromAjax-"+mid).tab(); // this line key.
        });
    });
});
</script>