Javascript用委托更新html内容

时间:2015-10-29 16:49:52

标签: javascript jquery html ajax

我正在尝试通过点击按钮将更多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>

1 个答案:

答案 0 :(得分:0)

响应html缺少2个关闭Div标签,因此语法不正确,可能不会显示在浏览器中。您可以在设置div后输出div的内容进行检查,以确保将来实际在DOM中设置内容

console.log($("#gallery-wrapper").html());