jquery分页PHP返回数据

jquery paginating php return data

本文关键字：数据 返回 PHP 分页 jquery      更新时间：2023-09-26

我正在使用这个jquery从服务器从php文件中获取分页数据。php文件生成分页，并以json格式返回与这些文件关联的数据。我的分页数据作为 li 标签列表返回，我用它来替换 HTML 文件中已经存在的引导分页

最初，这是由我的PHP文件生成的

<ul>
<li class="active"><a>1 </a></li>
<li><a href="#2">2</a></li>
</ul>

当我点击 2 时，它会获得下一个分页显示的数据

<ul><li><a href="#1">1</a></li>
<li class="active"><a>2 </a></li></ul>

现在，当我单击 1 以获取 1 的数据时，jquery 事件不会触发，jquery 代码

$("#pagination li a").click(function(e) { 
    debugger;
    e.preventDefault();
    var start=$(this).attr('href').split('#')[1];
    var msgDiv=$('#messages');
    var pagDiv=$("#pagination ul");
    try{
        $.ajax({ // create an AJAX call...
            beforeSend: function() {showLoading(msgDiv);},
            timeout:10000,
            type: "post", // GET or POST
            url: "./process-messages.php", // the file to call
            dataType:'json',
            data: {start:start}, // get the form data
            success: function(response) { // on success..
                if(response.status!='error'){
                   msgDiv.html(response.data); // update the DIV
                   pagDiv.html(response.page); // update the DIV
                }else{
                    msgDiv.html(response.data); // update the DIV
                }
            },
            error: function() { // on success..
                showGeneralError(msgDiv);
            }
        }); 
    }catch (e){
        console.log(e);
    }
});

可能有什么问题？

您应该将on用于动态内容。尝试

$(document).on('click', '#pagination li a', function() {
事件

委派是一种事件处理技术，其中，而不是 将事件处理程序直接附加到要侦听的每个元素 对于 EVENTS ON，将单个事件处理程序附加到 侦听其后代上发生的事件的那些元素 元素。

加载页面时，将 click 事件绑定到现有元素。替换列表时，事件将与旧元素一起删除。您需要的是在 AJAX 返回时再次调用初始化函数（有点团块），或者更好地使用如下.on()：

$("#pagination-container").on("click", "li a", function() {
    // same as your handler
});

请注意，pagination-container必须保留在页面中，即不通过 AJAX 更新：

<div id="pagination-container">
    <ul>
        ...pagination as in your code
    </ul>
</div>

我假设 AJAX 返回<ul>...</ul>的东西。

相关文章：