1

我正在使用引导程序 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>

但是，选项卡不起作用。单击“TWO”确实会更改选项卡本身 - 即上部 - 但不会显示内容：底部的“这是选项卡 2”。我尝试了我能想到的一切。现在我开始怀疑这是否是 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>

单击“Foo”不会显示警报。

我在这里想念什么？

4

2 回答 2

0

尝试：

<script>
  $(function() {
    $("#tabsFromAjax").tab();
  });
</script>
于 2014-09-26T23:22:35.357 回答
0

确保当您通过 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>
于 2015-08-16T00:31:23.897 回答