页面加载后插入时，Bootstrap轮播无法正常工作

Question

我正在尝试使用$("#ph").html("Carousel HTML markup");

将Bootstrap的Carousel标记插入占位符

以下是此问题的reproduction。

这有效：

$("#ph").html("Carousel HTML markup");

这不是：

$("#aButton").click(function(){  
    $("#ph").html("Carousel HTML markup");
});

如果我没有将方法放在click事件处理程序中，则轮播可以正常工作。 但为什么它不适用于点击？

Answer 1

可行，如果我们重新初始化轮播：

$(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();
  });
});

JSBin：http://jsbin.com/rotiwubeco/1/edit?html,js,output

Answer 2

插入轮播标记后，使用

初始化轮播

$('.carousel').carousel();