當通過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添加模式時，引導標籤不工作

回答

相關問題