问题AJAX＆QUOT;加载更多＆QUOT;按钮：消失一旦点击 [英] Issue with AJAX "load more" button: disappears once clicked

问题描述

编辑：的感谢大家的帮助。它仍然无法虽然工作。 该脚本适用细如果我改变的表有序列表。 （TR = OL和TD =李）这就是为什么我真的很认为问题来自的code 的追加部分。任何想法？

thanks everyone for your help. It still doesn't work though. This script works fine if i change the table to an ordered list. (tr = ol and td = li) That's why i really think the issue comes from the append part of the code. Any ideas?

一切似乎很好地工作除了加载更多按钮消失，它被点击之后。新职位加载但用户不能点击一次按钮加载更多内容。我看着左右，但无法找到一个解决我的问题。

Everything seems to work fine except for the "load more" button that disappears after it's been clicked. The new posts load but the users cannot click on the button again to load more posts. I've looked on SO but couldn't find a fix for my issue.

如果我删除此行：

$("#more"+ID).remove();

然后按钮确实出现，但GIF图像上加载保持永远的按钮无法点击...

then the button does show up but the gif image keeps on loading forever and the button is not clickable...

下面是在index.php code：

Here's the index.php code:

<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页面：

Here is the loadmore php page:

<?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  }?>

这是我在做什么错在这里有什么建议？ 谢谢！

Any tips on what i'm doing wrong here ? Thanks !

推荐答案

试试这个：

    
    $(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;
    });
    });
    

这篇关于问题AJAX＆QUOT;加载更多＆QUOT;按钮：消失一旦点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！