Javascript 单击“加载更多”按钮时不会加载任何内容

我在头版增加了一个“加载更多”按钮。按钮将在每15个帖子后加载更多帖子。我已经添加了所有必要的代码，但是当我单击按钮时，没有加载任何内容。有人有解决办法吗？或者，如果有更好更有效的方式来加载更多的帖子，我会喜欢其他的解决方案。几周来我一直在努力让它发挥作用，但我就是做不到

front-page.php

加载更多
我认为这里的问题是您没有将loadMorePosts函数附加到按钮上的事件侦听器。由于您的按钮id为“加载更多”，您可以执行以下操作：

function loadMorePosts(pageNumber, postsPerPage) {

  var query = 'action=load_more&page_no=' + pageNumber + 
    '&loop_file=loop&posts_per_page=' + postsPerPage;

  jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
    type: 'post',
    data: query,
    success: function(response){
        // handle response
    }
  });
}
$('#load-more').on('click', function(){
  loadMorePosts(pageNumber, postsPerPage)
})

$(document).ready(function() {
  $('#load-more').on('click', function(){
    loadMorePosts(pageNumber, postsPerPage)
  })
})

一些警告。我不知道你是如何检索pageNumber和postsPerPage值的

这个答案假设您在html加载完成后加载脚本。如果不是这样，则需要执行以下操作：

function loadMorePosts(pageNumber, postsPerPage) {

  var query = 'action=load_more&page_no=' + pageNumber + 
    '&loop_file=loop&posts_per_page=' + postsPerPage;

  jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
    type: 'post',
    data: query,
    success: function(response){
        // handle response
    }
  });
}
$('#load-more').on('click', function(){
  loadMorePosts(pageNumber, postsPerPage)
})

$(document).ready(function() {
  $('#load-more').on('click', function(){
    loadMorePosts(pageNumber, postsPerPage)
  })
})

如何将loadMorePosts函数附加到LoadMore按钮？如果代码无法自行运行，则不应使用Snipplet。。。。在所有代码中，我看不到您在哪里调用LoadMorePost。我在创建此代码时得到了一些帮助。我怎么给loadMorePosts打电话？谢谢你的帮助。不幸的是，它仍然不起作用。当您按下按钮时，无负载。我已将我编辑的js添加到我的问题中。请检查chrome开发者工具中的“网络”选项卡。您是否看到了适当的Ajax调用？您是如何获得页码/postsPerPage的？在我的front-page.php上，我有'posts_per_page'=>15，@user6738171，这是一个php变量。JS不知道php变量，除非您使用php编写一些JS使其知道。