Javascript 如何加载更多按钮功能问题

我在woocommerce产品页面上使用了一个“加载更多”按钮（使用本教程：）。 这一切都很好，除了当我点击LoadMore时，它会加载上面的产品和按钮，然后用户必须向上滚动才能看到新产品

第二次单击时，下一批产品将在第一次和第二次加载之间加载。你必须去找他们

有人知道这是什么原因吗？ 我无法向您显示实时视图，因为我的站点尚未处于活动状态或处于暂存状态

archive product.php:

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );
?>

<div id="top"></div>

<?php if ( is_active_sidebar( 'store_sidebar' ) ) { ?>
    <ul data-aos="fade" id="secondary" class="aside sidebar">
        <?php dynamic_sidebar( 'store_sidebar' ); ?>
    </ul>
<?php } ?>

<?php
/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

?>

    <header data-aos="fade" class="woocommerce-products-header">
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>

        <?php
        /**
         * Hook: woocommerce_archive_description.
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
        ?>
    </header>

    <?php
    if ( woocommerce_product_loop() ) {

        /**
         * Hook: woocommerce_before_shop_loop.
         *
         * @hooked woocommerce_output_all_notices - 10
         * @hooked woocommerce_result_count - 20
         * @hooked woocommerce_catalog_ordering - 30
         */
        do_action( 'woocommerce_before_shop_loop' );

        woocommerce_product_loop_start();

        if ( wc_get_loop_prop( 'total' ) ) {
            while ( have_posts() ) {
                the_post();

                /**
                 * Hook: woocommerce_shop_loop.
                 */
                do_action( 'woocommerce_shop_loop' );

                wc_get_template_part( 'content', 'product' );

            }
        }

        global $wp_query;
            if (  $wp_query->max_num_pages > 1 ) {
                echo '<button class="misha_loadmore">Load more</button>';
            }


        echo '<div class="top">';
            echo '<a class="more-link" href="#top">Back to top <span class="arrow">↑</span></a>';
        echo '</div>';

        woocommerce_product_loop_end();

        /**
         * Hook: woocommerce_after_shop_loop.
         *
         * @hooked woocommerce_pagination - 10
         */
        do_action( 'woocommerce_after_shop_loop' );
    } else {
        /**
         * Hook: woocommerce_no_products_found.
         *
         * @hooked wc_no_products_found - 10
         */
        do_action( 'woocommerce_no_products_found' );
    }

    /**
     * Hook: woocommerce_after_main_content.
     *
     * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
     */
    do_action( 'woocommerce_after_main_content' );

    /**
     * Hook: woocommerce_sidebar.
     *
     * @hooked woocommerce_get_sidebar - 10
     */
    // do_action( 'woocommerce_sidebar' );
    ?>

    <?php
    get_footer( 'shop' );

jQuery(function($){
        $('.misha_loadmore').click(function(){

            var button = $(this),
            data = {
                'action': 'loadmore',
                'query': misha_loadmore_params.posts,
                'page' : misha_loadmore_params.current_page
            };

            $.ajax({
                url : misha_loadmore_params.ajaxurl,
                data : data,
                type : 'POST',
                beforeSend : function ( xhr ) {
                    button.text('Loading...');
                },
                success : function( data ){
                    if( data ) {
                        button.text( 'Load more' ).next().before(data);
                        misha_loadmore_params.current_page++;

                        if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
                        button.remove();
                    } else {
                        button.remove();
                    }
                }
            });
        });
    });

functions.php

// AJAX LOAD MORE - PRODUCTS PAGE
function misha_my_load_more_scripts() {

    global $wp_query;
    wp_enqueue_script('jquery');
    wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '_static/js/main.js', array('jquery') );

    wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
        'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',
        'posts' => json_encode( $wp_query->query_vars ),
        'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
        'max_page' => $wp_query->max_num_pages
    ) );

    wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );

// AJAX HANDLER
function misha_loadmore_ajax_handler(){
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1;
    $args['post_status'] = 'publish';

    query_posts( $args );

    if( have_posts() ) :
        while( have_posts() ): the_post();
            wc_get_template_part( 'content', 'product' );
        endwhile;
    endif;
    die;
}

add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler');

在js文件中，找到：

button.text（'Load more'）.next（）.before（data）；

替换为：

button.text（'Load more'）.prev（）.after（data）；

在js文件中，找到：

button.text（'Load more'）.next（）.before（data）；

替换为：

button.text（'Load more'）.prev（）.after（data）；