我正在尝试使用$("#ph").html("Carousel HTML markup");
以下是此问题的reproduction。
这有效：
$("#ph").html("Carousel HTML markup");
这不是：
$("#aButton").click(function(){
$("#ph").html("Carousel HTML markup");
});
如果我没有将方法放在click事件处理程序中，则轮播可以正常工作。 但为什么它不适用于点击？
答案 0 :(得分：4)
可行，如果我们重新初始化轮播：
$(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();
});
});
答案 1 :(得分：2)
插入轮播标记后，使用
初始化轮播$('.carousel').carousel();