分页后,PHP / Ajax / jquery操作无法正常工作

时间:2017-03-31 17:41:28

标签: jquery element

我有一个php页面,使用jquery / ajax加载带分页的表。一旦点击分页中的任何页面(初始页面除外),我就无法将行重定向到其他页面

以下是我为表格生成的html的简化代码。我知道每次更改分页页面时都会正确生成html。

<tr class="table-row" data-myredirect="http://example.com/page">
<td>blah blah</td>
</tr>

加载表数据成功后(仅在用户运行查询后运行一次),我运行以下(简化):

success:function(result){
         //display table data (not shown)
$(".table-row").click(function() {
         //redirect
        window.document.location = $(this).data("myredirect");
    });
}

当用户从分页链接中选择不同的页面时,将运行以下命令:

//executes code below when user click on pagination links
    $("#results").on( "click", ".pagination a", function (e){
        e.preventDefault();
        $(".loading-div").show(); //show loading element
        var page = $(this).attr("data-page"); //get page number from link
        $("#results").load("test.php",{"page":page, "myparam":searchItemOne}, function(){ //get content from PHP page
            $(".loading-div").hide(); //once done, hide loading element
            //fixes scrolling up bug
            $('html, body').animate({
        scrollTop: $("#results").offset().top
     }, 0);
        });

    });

导航到下一个分页页面后,可能导致操作不再有效的原因是什么?我可以根据要求提供更多代码。

2 个答案:

答案 0 :(得分:1)

我认为是因为您的.table-row是在javascript代码之后呈现的(在您第二次通过AJAX加载html之后),因此重定向代码并不知道新的{{1} }。
尝试放置重定向代码

table-row

在您的$(".table-row").click(function() { //redirect window.document.location = $(this).data("myredirect"); }); 文件中,以便使用新的html重新加载。

答案 1 :(得分:0)

Taki's answer 不提供解决方案,而是提供指南。

为了解决这个问题,在定义了 $('#results').DataTable(); 事件之后,我将 $(".table-row").click() 移到了 javascripts 的末尾。现在我所有的页面都触发了嵌入式函数。