Infinite Scroll on ajax loaded content

感情迁移 提交于 2019-12-13 05:13:34

问题


I'm doing a WP_Query on let's say page-a.php, that page has a div called target where page-b.php is being loaded into. Page-a is a custom template and page-b is an archive page.

The structure on page A as example:

<body>
<div id="wrap">
<div class="target">
  while
   <div class="post">
     <h1>Title</h1>
     <p>Description</p>
   </div>
  endwhile
   <div class="pagination"></div>
</div>
</div>
</body>

On page-b I only include the < post > and < pagination > divs within a regular wp loop.

Now the jQuery:

 $(window).load(function() {
                $('.target').infinitescroll({
                  navSelector  : ".navigation",           
                                 // selector for the paged navigation (it will be hidden)
                  nextSelector : ".navigation a.next",    
                                 // selector for the NEXT link (to page 2)
                  itemSelector : ".post",          
                                 // selector for all items you'll retrieve
                  debug : true,
                  loading: {
                      finishedMsg: '<div class="alert alert-info" style="margin-top:50px"><p class="center">All posts were loaded</p></div>',
                      img: '',
                      msg: null,
                      msgText: "<p style='text-align:center; margin-top:50px;'><i style='font-size:60px; color:#babfc8'class='fa fa-cog fa-spin'></i></p>"
                    }

                }, function(arrayOfNewElems){
                 $('.post').animate({"opacity":"1","max-height":"150px","padding":"15px 8px"},800, "jswing");
                } 
                );

     });

-If I call that script on page-a.php will only work on it, once page-b content is placed on

-If I call on page-a.php and page-b.php it works on first, then when first ajax content is loaded and then (if I apply a new filter) it won't work.

-If I call the script on my ajax response function it will work once, then if I apply another filter and target div refreshes content, I get the

Uncaught TypeError: Cannot call method 'appendTo' of null

div classes called (.target and .post) are present on the page.

What the hell am I doing wrong here. Thanks.

PS: If you need to take a look at the real scripts let me know and I will provide.


回答1:


I think you need this : http://www.247techblog.com/implement-infinite-scroll-functionality-wordpress-wp-ajax-function/ Just need to call a wp ajax function



来源:https://stackoverflow.com/questions/21564561/infinite-scroll-on-ajax-loaded-content

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!