wordpress中的Ajax分页只工作一次答案

【问题标题】：Ajax pagination in wordpress working only one timewordpress中的Ajax分页只工作一次
【发布时间】：2017-08-15 20:44:50
【问题描述】：

和往常一样，我在 google 和 here 上进行了大量搜索，但没有找到我想要的。

这是 wordpress 和 ajax 加载（分页）

我的页面与工作猫。它确实有几个 div 和其他子猫，每个都有自己的 wp 循环，用于获取具有该特定子类别的帖子像这样

<div id="container">
    <div id="alljobs">
       <div id="posts">
            //wp loop #1
            //all jobs will be here from all cats; post title etc.
       </div><!--Posts -->
       <div id="alljobspagi">
       //the pagination for all jobs
       </div><!--alljobspagi -->
    </div><!--alljobs -->
    <div id="alljobspg">
       <div id="posts">
          //wp loop #2
          //all jobs will be here from pg cats; post title etc.
       </div><!--Posts -->
       <div id="alljobspgpagi">
          //the pagination for all jobs
       </div><!--alljobspgpagi -->
    </div><!--alljobspg -->
</div><!-- The container -->

现在我想要的是，当用户点击分页的“a”（标记为 1、2、3 等）时，它会通过 preventdefault() 并将该 div 帖子与下一页帖子一起加载。

我已经成功地制作了一个，但这在某种程度上是有效的，但在某种程度上却不是。我正在使用的 js 代码是（在 header.php btwn 中）

$('div#alljobspgpagi a[href]').click(function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
  jQuery('div#alljobspgpagi').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
  jQuery('#alljobspg').load(link+' #alljobspg');
});

上面的代码部分工作。例如，如果我有两个分页页面，就像现在我在第一页“1”上，它处于活动类（不可点击）中，当我点击数字“2”（可点击有一个）进入第二页时ajax 工作，一切正常，没有错误。现在我在结果的第二页，我想回到第一页或第 3 页（下一个）。但是当我点击它时，ajax 无法工作并且整个页面刷新（或加载第一页或下一页）。

有人可以给我任何想法吗？我的代码正在工作，但只有一次。我不知道它有什么问题，但是当返回页面页面或下一页时 preventDefault() 没有任何意义。 js 代码在页面加载后仅工作一次，无论是返回第 1 页（上一个）还是前进到第 3 页（下一个）。对不起，我是这个 jQuery 的新手，但不是 wp。

谢谢你，如果我的英语不好，对不起。

【问题讨论】：

为什么不在自定义帖子类型数组中使用分页参数并使用get_next_post_link get_previous_post_link？
感谢@marc，但分页工作正常。我想要的是在不刷新页面的情况下加载帖子的数据。

标签： javascript jquery ajax wordpress

【解决方案1】：

解决了。我正在更新内容，并通过这样做事件被清除。所以我所做的就是为所有事件添加一个额外的 div。

<div id="container">
    <div id="alljobs">
       <div id="posts">
            //wp loop #1
            //all jobs will be here from all cats; post title etc.
       </div><!--Posts -->
         <div id="alljobevents">
            <div id="alljobspagi">
              //the pagination for all jobs
            </div><!--alljobspagi -->
        </div><!-- Update : This is Extra-->
    </div><!--alljobs -->
    <div id="alljobspg">
      <div id="pglist">
       <div id="posts">
          //wp loop #2
          //all jobs will be here from pg cats; post title etc.
       </div><!--Posts -->
          <div id="alljobspgevent">
             <div id="alljobspgpagi">
               //the pagination for all jobs
             </div><!--alljobspgpagi -->
          </div>
      </div><!--pglist -->
    </div><!--alljobspg -->
</div><!-- The container -->

而更新的Js变成了

$('#alljobspgevent').click(function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
  jQuery('#pglist').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
  jQuery('#pglist').load(link+' #pglist');
   // Same can be done for updating pagination
});

【讨论】：