Issue with AJAX "load more" button: disappears once clicked - php

Question

EDIT: 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.
If I remove this line:
$("#more"+ID).remove();
then the button does show up but the gif image keeps on loading forever and the button is not clickable...
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">
more
</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>
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">
more
</div>
<?php }?>
Any tips on what i'm doing wrong here ?
Thanks !

Answer 1

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

Answer 2

You are removing the load more button after button clicked
$("#update_list >tbody").append(html);
//$("#more"+ID).remove(); remove this line