Jquery为自定义帖子类型的Wordpress加载更多按钮

Question

I am trying to add a load more button to my wordpress website, to load my custom post types. So far I have been able to make it load the posts.

The problem is that every time I load more posts it replaces the first batch witch the second and so on. I want it to append every consecutive batch of posts to the first batch until the are no more (max_num_pages) posts left after that the button should deactivate.

How would I go about achieving this? Suggestions and improvements will be greatly appreciated. This is what I have so far.

<div id="div1"></div>
<button class="load-more">load more</button>

var clicks = 0;

$(".load-more").click(function(){
clicks += 1;

if(clicks < 2){
$("#div1").load("http://mysite.nl/loadmore/");
    } else if(clicks > 1) {
        $("#div1").load("http://mysite.nl/loadmore/page/" + clicks);
    }
});

Answer 1

Using $("#div1").load() will replace all the HTML in #div1. I'd say load your new data on a hidden element then .append() that new data to #div1.

Or

...perhaps you can save the existing #div1 HTML to a variable:

var foo = $('#div1').html();

then load your new data and afterwards .prepend() the original:

$('#div1')
    .load("http://...")
    .prepend(foo);