Question

我正在使用bootstrap 3.2.0并解决以下问题：在我的主页上，我有一个按钮。单击此按钮可打开模态窗口。模态窗口进行API调用，并通过AJAX调用的响应填充它的content-div。 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>

但是，标签不起作用。点击＆＃34; TWO＆＃34;确实改变了标签本身 - 意思是上半部分 - 但不会显示内容：＆＃34;这是标签2＆＃34;在底部。我尝试了我能想到的一切。现在我开始怀疑这是否是3.2.0中的一个错误？

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

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

对test.php的AJAX调用只返回：

<div>
    <a href="#" id="testAnker">Foo</a>
</div>

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

点击＆＃34; Foo＆＃34;没有显示警报。

我在这里缺少什么？

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>

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

2 个答案: