共享按钮不适用于分页

时间:2017-03-07 14:16:55

标签: javascript jquery arrays

我在页面上使用list.js来过滤文章。我在每个div上都包含addThis社交分享按钮,但由于某些原因,在单击分页控件后addThis不起作用。它消失了。有人可以帮我这个吗?我在下面写了一个小提琴谢谢。

  • 注意不能让addThis显示在小提琴中,但仍希望有人知道为什么这不起作用。谢谢!

var monkeyList = new List('pagination-list', {
  valueNames: ['name'],
  page: 3,
  pagination: true
});
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!-- Articles Pagination Container -->
<div id="pagination-list">

<!-- Articles Pagination Sub Container -->           
<div class="list">
  
  	<section>
          <div class="container topmargin name">
              <div class="row">
                  <div class="col-md-6 img-margin">
                      <div class="addthis_inline_share_toolbox_d2zn pull-left" data-title="Test1" data-url="http://www.example.com"></div>
                      <img class="img-responsive img-rounded" src="../images/misc/crushed_versatility.jpg" alt="Crushed Versatility">
                  </div>
                  <div class="col-md-6">
                     <h1>Test</h1>
                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi lorem, tristique at facilisis at, pulvinar tincidunt nibh. In blandit metus et metus interdum porttitor sit amet non augue. Morbi euismod pharetra aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque commodo mollis purus, vel auctor leo tempor quis. Sed leo nulla, sollicitudin ut ultricies non, scelerisque vitae tellus. Curabitur blandit diam id fringilla tempus. Praesent egestas, sapien ut placerat feugiat, dui odio viverra ante, quis feugiat enim tortor eu libero.</p>     
                  </div>
                  <br>
              </div>     
          </div>
      </section>

      <section>
          <div class="container topmargin name">
              <div class="row">
                  <div class="col-md-6 img-margin">
                     <div class="addthis_inline_share_toolbox_d2zn pull-left" data-title="Test1" data-url="http://www.example.com"></div>
                      <img class="img-responsive img-rounded" src="http://placehold.it/800x200" alt="">
                  </div>
                  <div class="col-md-6">
                     <h1>Test 2</h1>
                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi lorem, tristique at facilisis at, pulvinar tincidunt nibh. In blandit metus et metus interdum porttitor sit amet non augue. Morbi euismod pharetra aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque commodo mollis purus, vel auctor leo tempor quis. Sed leo nulla, sollicitudin ut ultricies non, scelerisque vitae tellus. Curabitur blandit diam id fringilla tempus. Praesent egestas, sapien ut placerat feugiat, dui odio viverra ante, quis feugiat enim tortor eu libero.</p>
                  </div>
                  <br>
              </div>     
          </div>
      </section>
         
      <section>
          <div class="container topmargin name">
              <div class="row">
                  <div class="col-md-6 img-margin">
                     <div class="addthis_inline_share_toolbox_d2zn pull-left" data-title="Test1" data-url="http://www.example.com"></div>
                      <img class="img-responsive img-rounded" src="http://placehold.it/800x200" alt="">
                  </div>
                  <div class="col-md-6">
                     <h1>Test3</h1>
                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi lorem, tristique at facilisis at, pulvinar tincidunt nibh. In blandit metus et metus interdum porttitor sit amet non augue. Morbi euismod pharetra aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque commodo mollis purus, vel auctor leo tempor quis. Sed leo nulla, sollicitudin ut ultricies non, scelerisque vitae tellus. Curabitur blandit diam id fringilla tempus. Praesent egestas, sapien ut placerat feugiat, dui odio viverra ante, quis feugiat enim tortor eu libero.</p>   
                  </div>
                  <br>
              </div>     
          </div>
      </section>
         
      <section> 
          <div class="container topmargin name">
              <div class="row">
                  <div class="col-md-6 img-margin">
                      <div class="addthis_inline_share_toolbox_d2zn pull-left" data-title="Test1" data-url="http://www.example.com"></div>
                      <img class="img-responsive img-rounded" src="http://placehold.it/800x200" alt="">
                  </div>
                  <div class="col-md-6">
                     <h1>Test4</h1>
                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi lorem, tristique at facilisis at, pulvinar tincidunt nibh. In blandit metus et metus interdum porttitor sit amet non augue. Morbi euismod pharetra aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque commodo mollis purus, vel auctor leo tempor quis. Sed leo nulla, sollicitudin ut ultricies non, scelerisque vitae tellus. Curabitur blandit diam id fringilla tempus. Praesent egestas, sapien ut placerat feugiat, dui odio viverra ante, quis feugiat enim tortor eu libero.</p>      
                  </div>
                  <br>
              </div>     
          </div>
      </section>
         
      <section>
          <div class="container topmargin name">
              <div class="row">
                  <div class="addthis_inline_share_toolbox_d2zn pull-left" data-title="Test1" data-url="http://www.example.com"></div>
                      <img class="img-responsive img-rounded" src="http://placehold.it/800x200" alt="">
                  
                  <div class="col-md-6">
                     <h1>Test 5</h1>
                     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi lorem, tristique at facilisis at, pulvinar tincidunt nibh. In blandit metus et metus interdum porttitor sit amet non augue. Morbi euismod pharetra aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque commodo mollis purus, vel auctor leo tempor quis. Sed leo nulla, sollicitudin ut ultricies non, scelerisque vitae tellus. Curabitur blandit diam id fringilla tempus. Praesent egestas, sapien ut placerat feugiat, dui odio viverra ante, quis feugiat enim tortor eu libero.</p>
                  </div>
                  <br>
              </div>     
          </div>
      </section>
    
</div>
<!-- Articles Pagination Sub Container End --> 

<!-- Pagination Controls -->
<section>
  <div class="container">
      <div class="row">
          <div class="col-lg-12">
              <div class="pagination"></div>
          </div>
      </div>     
  </div>
</section>
<!-- Pagination Controls End -->
    
</div>
<!-- Articles Pagination Container End -->

0 个答案:

没有答案