AJAX 在自定义帖子网格上加载更多内容

Question

我无法让它工作。我正在尝试使用 ajax 加载更多按钮创建一个自定义帖子类型网格，以在网格中每页显示 6 个大多数。我可以显示帖子，但加载更多按钮就像普通的锚链接一样滚动到页面顶部。

我的主题代码：

    <div class="tabgrid">
          
          <?php 
    $postsPerPage = 6;
    $args = array(
        'post_type' => 'dslc_projects',
        'posts_per_page' => $postsPerPage,
        'offset' => $offset
    );
    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post();
?><div class="project-grid-item">

                <a href="<?php the_permalink() ?>">
                <h3><?php the_title() ?></h3>
                <p>View project...</p> </a>
           </div><?php
    endwhile; ?>
           
    <?php echo '<div id="more_posts">Load More</div>';
    wp_reset_postdata(); 
?>
           </div>
        </div>

我的 PHP：

function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset
    );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post(); 
       the_content();
    }

    exit; 
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

我的 JS：

var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
    var page = 1; // What page we are on.
    var ppp = 6; // Post per page

    $("#more_posts").on("click",function(){ // When btn is pressed.
        $("#more_posts").attr("disabled",true); // Disable the button, temp.
        $.post(ajaxUrl, {
            action:"more_post_ajax",
            offset: (page * ppp) + 1,
            ppp: ppp
        }).success(function(posts){
            page++;
            $(".tabgrid").append(posts); // CHANGE THIS!
            $("#more_posts").attr("disabled",false);
        });

   });

谁能看出这里有什么问题？

Answer 1

您的锚点只是一个普通的锚点，href="#" 表示滚动到顶部。您的 JS 代码正在尝试向 ID 为“#more_posts”的元素添加处理程序，但您的锚点没有 ID。

尝试用<div id="more_posts">Load More</div>替换你的锚