Jquery 加载页面后插入引导转盘时不工作
我试图使用Jquery 加载页面后插入引导转盘时不工作,jquery,css,twitter-bootstrap,carousel,Jquery,Css,Twitter Bootstrap,Carousel,我试图使用$（“#ph”）.html（“carouselhtml标记”）将引导的Carousel标记插入占位符中 以下是对这个问题的分析 这是有效的： $("#ph").html("Carousel HTML markup"); $("#aButton").click(function(){ $("#ph").html("Carousel HTML markup"); }); 这不是： $("#ph").html("Carousel HTML markup"); $("#aBu
$（“#ph”）.html（“carouselhtml标记”）将引导的Carousel标记插入占位符中
以下是对这个问题的分析
这是有效的：
$("#ph").html("Carousel HTML markup");
$("#aButton").click(function(){
$("#ph").html("Carousel HTML markup");
});
这不是：
$("#ph").html("Carousel HTML markup");
$("#aButton").click(function(){
$("#ph").html("Carousel HTML markup");
});
如果我不将该方法放入click事件处理程序中，旋转木马就会工作。
但是为什么单击时不起作用呢？如果我们重新初始化旋转木马，它会起作用：
$(function () {
$("#ttr").click(function () {
$("#ph").html( ... );
$('.carousel').carousel();
});
});
此外，出于善意，请确保将其放入文档的就绪事件处理程序中，就像我所做的那样
整个代码
$(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();
});
});
$（函数（）{
$（“#ttr”）。单击（函数（）{
$（“#ph”）.html（“”
+' '
+' '
+' '
+'自定义平铺文本、图标、图像C'
+“融合它们，打造你的地铁风格”
);
$（'.carousel'）.carousel（）；
});
});
JSBin:如果我们重新初始化旋转木马：
$(function () {
$("#ttr").click(function () {
$("#ph").html( ... );
$('.carousel').carousel();
});
});
此外，出于善意，请确保将其放入文档的就绪事件处理程序中，就像我所做的那样
整个代码
$(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();
});
});
$（函数（）{
$（“#ttr”）。单击（函数（）{
$（“#ph”）.html（“”
+' '
+' '
+' '
+'自定义平铺文本、图标、图像C'
+“融合它们，打造你的地铁风格”
);
$（'.carousel'）.carousel（）；
});
});
JSBin:插入旋转木马标记后，使用
$('.carousel').carousel();
插入旋转木马标记后，使用
$('.carousel').carousel();
你的狂欢密码在哪里？看起来不错。你看到上面的链接了吗？我检查了5次。。。我根本找不到carousal。它直接在Javascript部分，不要查看我知道的HTML部分，但在我的情况下，当我插入标记时，文档已经加载；-）-->AJAX谢谢。你的狂欢密码在哪里？看起来不错。你看到上面的链接了吗？我检查了5次。。。我根本找不到carousal。它直接在Javascript部分，不要查看我知道的HTML部分，但在我的情况下，当我插入标记时，文档已经加载；-）-->AJAX谢谢。好的，如果它异步加载到页面中，我必须重新初始化它。这就是我错过的。因为，当标记在页面加载时总是存在，那么我根本不必使用引导API。谢谢@我明白了<代码>：D
好的，如果异步加载到页面中，我必须重新初始化它。这就是我错过的。因为，当标记在页面加载时总是存在，那么我根本不必使用引导API。谢谢@我明白了<代码>：D