PHP/Ajax/jquery 分页点击后操作不起作用
PHP/Ajax/jquery action not working after pagination click
我有一个 php 页面加载 table 并使用 jquery/ajax 分页。单击分页中的任何页面(初始页面除外)后,我无法让行重定向到不同的页面
这是我为 table 生成的 html 的简化代码。我知道每次更改分页页面时都会正确生成 html。
<tr class="table-row" data-myredirect="http://example.com/page">
<td>blah blah</td>
</tr>
加载 table 数据成功后(在用户 运行 查询后仅 运行 一次),我 运行 以下(简化):
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);
});
});
导航到下一个分页页面后,什么可能导致该操作不再有效?我可以根据要求包含更多代码。
我认为这是因为你的 .table-row
在 javascript 代码之后呈现(在你第二次通过 AJAX 加载 html 之后)所以重定向代码没有'知道新 table-row
。
尝试将重定向代码
$(".table-row").click(function() {
//redirect
window.document.location = $(this).data("myredirect");
});
在您的 php
文件中,以便使用新的 html
.
重新加载
Taki's answer 不提供解决方案,而是一个指南。
为了解决这个问题,我在定义 $(".table-row").click()
事件后将 $('#results').DataTable();
移到了我的 javascripts 的末尾。现在我所有的页面都触发了嵌入式功能。
我有一个 php 页面加载 table 并使用 jquery/ajax 分页。单击分页中的任何页面(初始页面除外)后,我无法让行重定向到不同的页面
这是我为 table 生成的 html 的简化代码。我知道每次更改分页页面时都会正确生成 html。
<tr class="table-row" data-myredirect="http://example.com/page">
<td>blah blah</td>
</tr>
加载 table 数据成功后(在用户 运行 查询后仅 运行 一次),我 运行 以下(简化):
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);
});
});
导航到下一个分页页面后,什么可能导致该操作不再有效?我可以根据要求包含更多代码。
我认为这是因为你的 .table-row
在 javascript 代码之后呈现(在你第二次通过 AJAX 加载 html 之后)所以重定向代码没有'知道新 table-row
。
尝试将重定向代码
$(".table-row").click(function() {
//redirect
window.document.location = $(this).data("myredirect");
});
在您的 php
文件中,以便使用新的 html
.
Taki's answer 不提供解决方案,而是一个指南。
为了解决这个问题,我在定义 $(".table-row").click()
事件后将 $('#results').DataTable();
移到了我的 javascripts 的末尾。现在我所有的页面都触发了嵌入式功能。