我試圖插入一個引導的旋轉木馬標記爲使用$("#ph").html("Carousel HTML markup");引導旋轉木馬加載
這裏的佔位符是問題的一個reproduction。
這工作：
$("#ph").html("Carousel HTML markup");
這不：如果我不把方法的單擊事件處理程序
$("#aButton").click(function(){
$("#ph").html("Carousel HTML markup");
});
轉盤工作。 但爲什麼它不能在點擊？
作品，如果我們重新初始化旋轉木馬：
$(function() {
$("#ttr").click(function() {
$("#ph").html(...);
$('.carousel').carousel();
});
});
而且，只是善良，確保你把它放在document的ready事件處理程序，就像我是怎麼做。
整個代碼
$(function() {
$("#ttr").click(function(){
$("#ph").html('<div id="divMetroTiles"> <div class="container dynamicT'
+'ile"> <div class="row "> <div class="col-sm-2 col-xs-4"> <div id="tile'
+'1" class="tile" style="height: 185px;"> <div class="carousel slide" d'
+'ata-ride="carousel" style="height: 185px;"> <!-- Wrapper for slides --'
+'> <div class="carousel-inner"> <div class="item active" style="height:'
+' 185px;"> <img src="http://handsontek.net/demoimages/tiles/twitter1.pn'
+'g" class="img-responsive"> </div> <div class="item" style="height: 185'
+'px;"> <img src="http://handsontek.net/demoimages/tiles/twitter2.png" c'
+'lass="img-responsive"> </div> </div> </div> </div> </div> <div class='
+'"col-sm-2 col-xs-4"> <div id="tile2" class="tile" style="height: 185px'
+';"> <div class="carousel slide" data-ride="carousel" style="height: 1'
+'85px;"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div '
+'class="item" style="height: 185px;"> <img src="http://handsontek.net/d'
+'emoimages/tiles/hot.png" class="img-responsive"> </div> <div class="it'
+'em active" style="height: 185px;"> <img src="http://handsontek.net/dem'
+'oimages/tiles/hot2.png" class="img-responsive"> </div> <div class="ite'
+'m" style="height: 185px;"> <img src="http://handsontek.net/demoimages/'
+'tiles/hot3.png" class="img-responsive"> </div> </div> </div> </div> <'
+'/div> <div class="col-sm-2 col-xs-4"> <div id="tile3" class="tile" sty'
+'le="height: 185px;"> <div class="carousel slide" data-ride="carousel"'
+' style="height: 185px;"> <!-- Wrapper for slides --> <div class="carou'
+'sel-inner"> <div class="item" style="height: 185px;"> <img src="http:/'
+'/handsontek.net/demoimages/tiles/weather2.png" class="img-responsive">'
+' </div> <div class="item active" style="height: 185px;"> <img src="htt'
+'p://handsontek.net/demoimages/tiles/weather.png" class="img-responsive'
+'"> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> '
+'<div id="tile4" class="tile" style="height: 185px;"> <div class="carou'
+'sel slide" data-ride="carousel" style="height: 185px;"> <!-- Wrapper f'
+'or slides --> <div class="carousel-inner"> <div class="item next left"'
+' style="height: 185px;"> <img src="http://handsontek.net/demoimages/ti'
+'les/facebook3.png" class="img-responsive"> </div> <div class="item act'
+'ive left" style="height: 185px;"> <img src="http://handsontek.net/demo'
+'images/tiles/facebook2.png" class="img-responsive"> </div> </div> </di'
+'v> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile5" clas'
+'s="tile" style="height: 185px;"> <div class="carousel slide" data-rid'
+'e="carousel" style="height: 185px;"> <!-- Wrapper for slides --> <div '
+'class="carousel-inner"> <div class="item active left" style="height: 1'
+'85px;"> <img src="http://handsontek.net/demoimages/tiles/neews.png" cl'
+'ass="img-responsive"> </div> <div class="item next left" style="height'
+': 185px;"> <img src="http://handsontek.net/demoimages/tiles/neews2.png'
+'" class="img-responsive"> </div> </div> </div> </div> </div> <div cla'
+'ss="col-sm-2 col-xs-4"> <div id="tile6" class="tile" style="height: 18'
+'5px;"> <div class="carousel slide" data-ride="carousel" style="height'
+': 185px;"> <!-- Wrapper for slides --> <div class="carousel-inner"> <d'
+'iv class="item active" style="height: 185px;"> <img src="http://handso'
+'ntek.net/demoimages/tiles/skype.png" class="img-responsive"> </div> <d'
+'iv class="item" style="height: 185px;"> <img src="http://handsontek.ne'
+'t/demoimages/tiles/skype2.png" class="img-responsive"> </div> </div> <'
+'/div> </div> </div> </div> <div class="row"> <div class="col-sm-4 co'
+'l-xs-8"> <div id="tile7" class="tile" style="height: 185px;"> <div cl'
+'ass="carousel slide" data-ride="carousel" style="height: 185px;"> <!--'
+' Wrapper for slides --> <div class="carousel-inner"> <div class="item '
+'active" style="height: 185px;"> <img src="http://handsontek.net/demoim'
+'ages/tiles/gallery.png" class="img-responsive"> </div> <div class="ite'
+'m" style="height: 185px;"> <img src="http://handsontek.net/demoimages/'
+'tiles/gallery2.png" class="img-responsive"> </div> <div class="item" s'
+'tyle="height: 185px;"> <img src="http://handsontek.net/demoimages/tile'
+'s/gallery3.png" class="img-responsive"> </div> </div> </div> </div> <'
+'/div> <div class="col-sm-2 col-xs-4"> <div id="tile8" class="tile" sty'
+'le="height: 185px;"> <div class="carousel slide" data-ride="carousel"'
+' style="height: 185px;"> <!-- Wrapper for slides --> <div class="carou'
+'sel-inner"> <div class="item" style="height: 185px;"> <img src="http:/'
+'/handsontek.net/demoimages/tiles/music.png" class="img-responsive"> </'
+'div> <div class="item active" style="height: 185px;"> <img src="http:/'
+'/handsontek.net/demoimages/tiles/music2.png" class="img-responsive"> <'
+'/div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <di'
+'v id="tile9" class="tile" style="height: 185px;"> <div class="carouse'
+'l slide" data-ride="carousel" style="height: 185px;"> <!-- Wrapper for'
+' slides --> <div class="carousel-inner"> <div class="item next left" s'
+'tyle="height: 185px;"> <img src="http://handsontek.net/demoimages/tile'
+'s/calendar.png" class="img-responsive"> </div> <div class="item active'
+' left" style="height: 185px;"> <img src="http://handsontek.net/demoima'
+'ges/tiles/calendar2.png" class="img-responsive"> </div> </div> </div> '
+' </div> </div> <div class="col-sm-4 col-xs-8"> <div id="tile10" class='
+'"tile" style="height: 185px;"> <div class="carousel slide" data-ride='
+'"carousel" style="height: 185px;"> <!-- Wrapper for slides --> <div cl'
+'ass="carousel-inner"> <div class="item next left" style="height: 185px'
+';"> <h3 class="tilecaption"><i class="fa fa-child fa-4x"></i></h3> </d'
+'iv> <div class="item" style="height: 185px;"> <h3 class="tilecaption">'
+'Customize your tiles</h3> </div> <div class="item" style="height: 185p'
+'x;"> <h3 class="tilecaption">Text, Icons, Images</h3> </div> <div clas'
+'s="item active left" style="height: 185px;"> <h3 class="tilecaption">C'
+'ombine them and create your metro style</h3> </div> </div> </div> </'
+'div> </div> </div> </div> </div>'
);
$('.carousel').carousel();
});
});
好吧，如果它異步加載到頁面中，我必須重新初始化它。 這就是我錯過的。因爲，當標記在頁面加載時出現時，我根本不必使用Bootstrap API。謝謝！ – Legends
@傳奇陷阱......'：D' –
插入轉盤的標記後，初始化
$('.carousel').carousel();
哪裏是你的狂歡遊行代碼傳送帶？對我來說看起來很好。 –
你看到上面的鏈接了嗎？ – Legends
我查了5次...我根本找不到一個carousal。 –