0

我正在使用这个 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);
    }

});

可能是什么问题呢？

4

2 回答 2

1

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

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

事件委托是一种事件处理技术，它不是将事件处理程序直接附加到要侦听事件的每个元素，而是将单个事件处理程序附加到这些元素的父元素以侦听其后代元素上发生的事件。

于 2013-09-20T08:00:57.307 回答
1

加载页面时，您将单击事件绑定到现有元素。当列表被替换时，事件与旧元素一起被删除。您需要的是在 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>东西。

于 2013-09-20T08:03:15.037 回答