页面加载后插入时引导轮播不工作答案

【问题标题】：Bootstrap carousel not working when inserted after page has loaded页面加载后插入时引导轮播不工作
【发布时间】：2016-12-27 23:58:32
【问题描述】：

我正在尝试使用 $("#ph").html("Carousel HTML markup"); 将 Bootstrap 的轮播标记插入占位符

这是该问题的reproduction。

这行得通：

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

这不是：

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

如果我不将该方法放入单击事件处理程序中，则轮播将起作用。但是为什么点击后不起作用？

【问题讨论】：

你的 Carousal Code 在哪里？我觉得很好。
你看到上面的链接了吗？
我检查了 5 次...我根本找不到 carousal。
直接在Javascript部分，不要看HTML部分
我知道，但在我的情况下，当我插入标记时，文档已经加载；-) --> ajax。谢谢。

标签： jquery css twitter-bootstrap carousel

【解决方案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

【讨论】：

好的，如果它异步加载到页面中，我必须重新初始化它。这就是我错过的。因为，当页面加载时标记已经存在时，我根本不必使用 Bootstrap API。谢谢！
@Legends Gotcha...:D

【解决方案2】：

插入轮播标记后，用

初始化轮播

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

【讨论】：