时间戳

首页 > 解决方案 > 如何通过 ajax 进行分页使用正确的分页链接，而不是像 admin-ajax.php/page/n 这样的东西？

ajax - 如何通过 ajax 进行分页使用正确的分页链接，而不是像 admin-ajax.php/page/n 这样的东西？

问题描述

我正在尝试将常规分页链接更改为通过 ajax 工作，因为我的存档页面还使用了一些适用于 ajax 的过滤器。它只是第一次工作，一旦它重新生成分页链接，它们都链接到 admin-ajax.php/page/n 而不是 my-archive/page/n。

我在分页链接中添加了一个点击处理程序，这样当您点击一个链接时，它不会离开，而是通过 ajax 请求拉取分页数据，这也重新构建了分页链接——这就是管理员的位置-ajax.php 部分的href 来自。

有没有办法生成这些链接并强制它们使用存档 url 作为基础而不是 admin-ajax.php？

我正在使用木材，这就是我所拥有的：

    $context = Timber::context();

    ob_start();
    Timber::render('02-molecules/resource-listing/resource-listing.twig', $context);

    $results = array(
        'html' => ob_get_clean(),
    );

我的 resource-listing.twig 文件包含帖子列表以及分页链接：

{% for post in posts %}
    <li class="m-resource__listing" id="resource-{{post.ID}}">
        <a href="{{post.link}}" title="{{post.preview.read_more(false)}}">
            {{post.title}}
        </a>
    </li>
{% endfor %}


{% include '03-organisms/pagination/pagination.twig' with { pagination: posts.pagination({show_all: false, mid_size: 3, end_size: 2}) } %}

标签： ajaxwordpresspaginationtwigtimber

解决方案

您是否使用e.preventDefault()阻止页面加载？我的解决方案是更改我的 ajax JS 文件中的单击事件处理程序

$(selector).click(function());

至

$([selector that is static on the page]).on('click', '[selector of pagination link that gets dynamically loaded via AJAX]', function());

URL 仍然admin-ajax.php在其中，但正确的 jQuery 事件处理程序阻止页面在点击时加载。

这篇文章及其评论帮助我解决了我的问题：点击事件不适用于动态生成的元素

推荐阅读