ajax jquery-加载后重复内容

Question

Im making a blog list page, with Load More... and I have a problem. After click/load my whole content duplicates, but only the first page, doesnt duplicates, only the next pages. If Im open a PHP file, where's my content generated, it shows only the current page what I need to load, for example only second page

There's the whole code

    <?php 
    $paginationClass = 'otw_portfolio_manager-load-more-newspapper';
    $paginationLoadMore = 'otw_portfolio_manager-load-more-newspapper';

    $uniqueHash = wp_create_nonce("otw_pm_get_posts_nonce"); 
    $listID = $this->listOptions['id'];
    $maxPages = $otw_pm_posts->max_num_pages;

    $paginationPageNo = (int) $_GET['page'];
    //echo $paginationPageNo;
    ($paginationPageNo == 0) ? $page = 2 : $page = $paginationPageNo + 1;
    $ajaxURL = admin_url( 'admin-ajax.php?action=get_pm_posts&post_id='. $listID .'&nonce='. $uniqueHash .'&page='. $page );
?>

    <script>
        $(document).ready(function(){
            $(document).on('click','.show_more',function(){
                var ID = $(this).attr('id');
                $('.show_more').hide();
                $('.loding').show();
                $.ajax({
                    type:'POST',
                    url:'<?php echo $ajaxURL;?>',
                    data:'id='+ID,
                    success:function(html){
                        $('#show_more_main-'+ID).remove();
                        $(".row.works").append(html);
                    }
                }); 
            });
        });
    </script>


<!-- Load More Pagination -->
<div class="js-pagination_container">
    <div class="<?php echo $paginationClass;?> hide">
        <a href="<?php echo $ajaxURL;?>" class="js-pagination-no"><?php echo $page;?></a>
    </div>
    <div id="show_more_main-<?php echo $page;?>" class="<?php echo $paginationLoadMore;?> js-otw_portfolio_manager-load-more">
        <a href="<?php echo $ajaxURL;?>" data-empty="<?php _e('No more items to load.', OTW_PML_TRANSLATION);?>" data-isotope="true" class="show_more"><?php _e('Load More', OTW_PML_TRANSLATION);?></a>
    </div>
</div>
<?php?>
<!-- End Load More Pagination -->
</div>

Console report after 3 clicks on last "Load More"

13:36:29.502 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:31.842 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:31.905 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:31.936 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:36.333 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=4".
13:36:36.380 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:36.585 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:36.929 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=4".
13:36:36.982 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".

I make this function in wordpress

Answer 1

Now I update and move my jquery away from php and now I see how much times it duplicates, and how it works

This is my template

<div class="row works">
    <?php  foreach( $otw_pm_posts->posts as $post ){

        echo $this->buildInterfacePortfolioItems( $post ); ?>
        <?php echo $this->getSocial( $post ); ?>
        <?php echo $this->getDelimiter( $post ); ?>
    <?php }?>

    <?php 
    $paginationClass = 'otw_portfolio_manager-load-more-newspapper';
    $paginationLoadMore = 'otw_portfolio_manager-load-more-newspapper';

    $uniqueHash = wp_create_nonce("otw_pm_get_posts_nonce"); 
    $listID = $this->listOptions['id'];
    $maxPages = $otw_pm_posts->max_num_pages;

    $paginationPageNo = (int) $_GET['page'];
    //echo $paginationPageNo;
    ($paginationPageNo == 0) ? $page = 2 : $page = $paginationPageNo + 1;
    $ajaxURL = admin_url( 'admin-ajax.php?action=get_pm_posts&post_id='. $listID .'&nonce='. $uniqueHash .'&page='. $page );
?>

    <script>
        $(document).ready(function(){
            loadMore();
        });
    </script>


<!-- Load More Pagination -->
<div class="js-pagination_container">
    <div class="<?php echo $paginationClass;?> hide">
        <a href="<?php echo $ajaxURL;?>" class="js-pagination-no"><?php echo $page;?></a>
    </div>
    <div class="<?php echo $paginationLoadMore;?> js-otw_portfolio_manager-load-more">
        <a href="<?php echo $ajaxURL;?>" data-empty="<?php _e('No more items to load.', OTW_PML_TRANSLATION);?>" data-isotope="true" class="show_more"><?php _e('Load More', OTW_PML_TRANSLATION);?></a>
    </div>
</div>

<?php?>
<!-- End Load More Pagination -->
</div>

And this is my jQuery now

function loadMore(){
    $(document).on('click','.show_more', 'a' ,function(e){
        var post = $(this).attr('href');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:post,
            success:function(html){
                $(html).insertAfter(".row.works");
            }
        }); 
        e.stopPropagation();

    });
}

And how its duplicates
1. click - shows second page
2. click - 3 times duplicate third page
3. click - n times duplicate fourth page and content with second and third page content