在按钮单击滚动上加载更多（无插件）

Question

我在WordPress中有一个自定义分类法，称为Case studies。

Home.php是一页。在home.php中，我循环运行以获取所有案例研究：

<?php
// only display 5 posts at first, then load 5 more on button click
$args = array('post_type' => 'case-studies', 'posts_per_page' => 5 );
$the_query = new WP_Query($args);

if ( $the_query->have_posts() ) { 
    echo "<div id='customers' class='case-studies-container'>"; // If there are results, create a single div in which all case studies will sit.
    // run a loop to get data from all the posts that exist
    while ($the_query->have_posts() ) { 
        $the_query->the_post();
        tp_get_part( 'templates/snippets/case-study-card',
        array(
            'heading'           => get_the_title(),                         
            'subheading'        => get_field( 'case_study_subheading'), 

        )
    );
    }
    echo "<div><input type='button' id='loadmore' value='Load more'/></div>
    </div>" // case-studies-container closed;
    wp_reset_postdata();
} else {
    // no posts found
}
?>

在#loadmore按钮上单击时，我希望它从数据库中加载5个以上的帖子并显示它们。为了适应这一点，我在*home.php*

中添加了以下JS

<script type="text/javascript">
    $(document).ready(function(){
        $('#loadmore').click(function(){
            // alert('Hello world');
            // load more case studies here
                jQuery(function($){

                    var column_width = $(this).data('column-width'); 
                    var max_num_pages = $(this).data('max-num-pages');
                    var ignore = $(this).data('featured');
                    var post_type = $(this).data('type');

                    var button = $(this), 
                      data = {
                        action:'loadmore',
                        query: loadmore_params.posts, // that's how we get params from wp_localize_script() function
                        page : loadmore_params.current_page,
                        security : loadmore_params.security,
                        columns : column_width,
                        exclude : ignore,
                        max_num_pages : max_num_pages,
                        post_type : post_type
                        };

                    $.ajax({
                        url : loadmore_params.ajaxurl, // AJAX handler
                        data : data,
                        type : 'POST',
                        beforeSend : function ( xhr ) {
                            button.text('Loading...'); // change the button text, you can also add a preloader image
                        },
                        success : function( data ){
                            if( data ) {
                                button.text( 'Load More' ).prev().before(data); // insert new posts
                                loadmore_params.current_page++;

                                $('.case-studies-container').find('.case-card').last().after( data ); // where to insert posts

                                if ( loadmore_params.current_page == max_num_pages )
                                    button.remove(); // if last page, remove the button

                                // you can also fire the "post-load" event here if you use a plugin that requires it
                                // $( document.body ).trigger( 'post-load' );
                            } else {
                                button.remove(); // if no data, remove the button as well
                            }
                        },
                        error : function(error){ console.log(error) }
                    });

                });

        });
    });
</script>

以及以下用ajax-loaders.php编写的AJAX：

<?php
function ajax_handler(){

  check_ajax_referer('load_more', 'security');
    // prepare our arguments for the query
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    $args['post_status'] = 'publish';
  $args['post__not_in'] = explode(',',$_POST['exclude']);
  $args['max_num_pages'] = $_POST['max_num_pages'];
  $cols = $_POST['columns'];
  $type = $_POST['post_type'];

    query_posts($args );
    if( have_posts() ) :
        // run the loop
        while( have_posts() ): the_post(); ?>

        <div class="<?php echo ($cols ? 'col-'.$cols : 'col-3') .' '. ($type === 'case-study' ? 'case-studies' : 'article__item'); ?>  grid__item" id="<?php echo get_the_id(); ?>">
            <?php
            tp_get_part( 'templates/snippets/case-study-card',
              array(
                'filterable' => true,
                'post'       => $post,
                'type'       => get_cpt_term(get_the_id(), 'case-studies')
              )
            );
            ?>
        </div>

        <?php
    endwhile;
    endif;
    die;
}
add_action('wp_ajax_loadmore', 'ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'ajax_handler'); // wp_ajax_nopriv_{action}
?>

设置好所有这些文件后，单击按钮，什么都没有发生？如果我取消对警报的注释，则会发生警报，​​这意味着正在触发，但不确定我的负载更多功能在哪里出错？