[英]Issue with AJAX “load more” button: disappears once clicked
編輯:謝謝大家的幫助。 它仍然不起作用。 如果我將表更改為有序列表,則此腳本可以正常工作。 (tr = ol和td = li)這就是為什么我真的認為問題出在代碼的附加部分 。 有任何想法嗎?
除了單擊“加載更多”按鈕后,該按鈕似乎消失了,其他一切似乎都正常。 新帖子已加載,但用戶無法再次單擊該按鈕以加載更多帖子。 我已經看過了,但是找不到解決我的問題的方法。
如果我刪除此行:
$("#more"+ID).remove();
那么該按鈕確實會顯示,但是gif圖像會永遠加載,並且該按鈕不可點擊...
這是index.php代碼:
<table id="update_list" >
<tbody>
<?php
$result=query("SELECT * FROM postlist ORDER BY postid DESC LIMIT 9");
foreach ($result as $row)
{
$postid=$row['postid'];
$post=$row['post'];
?>
<tr id="<?php echo $postid ?>">
<td>
<?php echo $post; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div id="more<?php echo $postid; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $postid; ?>">more</a>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="/loading.gif" />');
$.ajax({
type: "POST",
url: "loadmore.php",
data: "lastpost="+ ID,
cache: false,
success: function(html){
$("#update_list >tbody").append(html);
$("#more"+ID).remove();
}
});
}
else
{
$(".morebox").html('The End');
}
return false;
});
});
</script>
</html>
這是loadmore php頁面:
<?php
include("includes/config.php");
if(isset($_POST['lastpost']))
{
$lastpost=$_POST['lastpost'];
$result=query("SELECT * from postlist WHERE postid < '$lastpost' ORDER BY postid DESC
LIMIT 5");
foreach ($result as $row){
$postid=$row['postid'];
$post=$row['post'];
?>
<tr id="<?php echo update$postid ?>">
<td>
<?php echo $post; ?>
</td>
</tr>
<?php } ?>
<div id="more<?php echo $postid; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $postid; ?>">more</a>
</div>
<?php }?>
關於我在這里做錯什么的任何提示嗎? 謝謝 !
嘗試這個:
$(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).find("a").hide().insertAfter('<img src="/loading.gif" />'); //hide a link and insert image after it $.ajax({ type: "POST", url: "loadmore.php", data: "lastpost="+ ID, cache: false, success: function(html){ $("#update_list >tbody").append(html); $("#more"+ID).find("img").remove(); // remove img $("#more"+ID).find("a").show(); //and show link } }); } else { $(".morebox").html('The End'); } return false; }); });
單擊按鈕后,您將刪除“ load more
按鈕
$("#update_list >tbody").append(html);
//$("#more"+ID).remove(); remove this line
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.