我正在尝试通过点击按钮将更多html加载到我的页面，这是我到目前为止所做的：
我的主要HTML：
<div class="row" id="gallery-wrapper" >
<div id="mixer">
{% for item in items %}
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign {{item.category_id}}">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/{{item.path_1}}" alt="">
<div class="folioHover2 dirHov">
<a href="static/{{item.path_1}}" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="{{url_for('main.view', item_id=item.id)}}" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
{% endfor %}
<div class="clearfix"></div>
<div class="col-lg-12 text-center wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<button id="load-more" class="defaultButton">نمایش بیشتر</button>
</div>
</div>
</div>
<script>
var per_page = 4;
$('body').delegate("#load-more", "click", function(){
per_page = per_page + 4;
$.ajax({
'url' : '/gallery/update',
'async': false,
'type': 'get',
'dataType': "html",
'data': {'per_page': per_page},
'success': function(data) {
$("#gallery-wrapper").empty().html(data);
console.log(data);
}
});
})
</script>
我的补充html：
<div class="row" id="gallery-wrapper">
<div id="mixer">
{% for item in items %}
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign {{item.category_id}}">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/{{item.path_1}}" alt="">
<div class="folioHover2 dirHov">
<a href="static/{{item.path_1}}" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="{{url_for('main.view', item_id=item.id)}}" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
{% endfor %}
<div class="clearfix"></div>
<div class="col-lg-12 text-center wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<button id="load-more" class="defaultButton">نمایش بیشتر</button>
</div>
</div>
</div>
到目前为止，我已经能够在我的ajax调用中获得我想要的结果，但问题是加载的内容不会显示在我的html中。
这是我在控制台中看到的响应：
<div class="row" id="gallery-wrapper">
<div id="mixer">
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9010.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9010.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/11" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9215.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9215.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/10" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9215.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9215.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/9" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9011.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9011.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/8" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9011.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9011.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/7" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9010.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9010.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/6" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-12 noPadding text-center mix wdesign None">
<div class="folioImg wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<img src="static/IMG_9011.jpg" alt="">
<div class="folioHover2 dirHov">
<a href="static/IMG_9011.jpg" class="prePhoto" data-rel="prettyPhoto"><i class="icon-search3"></i></a>
<a href="/view/5" class="detailsLink"><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
答案 0 :(得分：0)
响应html缺少2个关闭Div标签，因此语法不正确，可能不会显示在浏览器中。您可以在设置div后输出div的内容进行检查，以确保将来实际在DOM中设置内容
console.log($("#gallery-wrapper").html());