当通过AJAX添加模式时，引导标签不工作

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

点击“富”不显示警报。

缺少什么我在这里？

来源

2014-09-26 osh

我想补充一点，如果我不使用AJAX调用，但使用“远程”选项调用模式，一切正常。（其他所有内容都是一样的） – osh 2014-09-29 08:19:22

我还想指出，我只是在jQueryUI-对话框窗口中尝试了相同的代码，它可以工作。所以看起来，在引导模式窗口内，不可能运行jQuery代码。 – osh 2014-09-29 08:41:51

是的，你可以在引导模式中使用jquery。就这样你知道大多数bootstrap JavaScript组件都是基于jQuery的。这是你试图绑定到Dom还没有的元素。当我在几个小时内上班时，我会为你做一个小提琴。坚持下去。 – Phatjam98 2014-09-29 13:36:49

尝试：

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

来源

2014-09-26 23:22:35 Phatjam98

没有区别 - 不起作用。 – osh 2014-09-27 08:35:00

将点击事件监听器放入您的Ajax完成回调中 – Phatjam98 2014-09-27 19:47:33

没有区别 - 它不起作用。 – osh 2014-09-29 07:30:20

确保当你通过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-16 00:31:23

当通过AJAX添加模式时，引导标签不工作

回答

相关问题