append.html jquery is not working the same as the existing html?

Question

i have a situation where im apending html to load more posts(pagination), and each post has a reply link, the appened html is not functioning properly:

the jquery post:

$(function() {
//More Button
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
 type: "POST",
 url: "ajax_more.php",
 data: "lastmsg="+ ID,
 cache: false,
 success: function(html){
 $("ul.statuses").append(html);
 $("#more" + ID).remove();


     }
  });
}
else
{
   $(".morebox").html('The End');

}


return false;


});
});

html file:

return <<<ENDOFRETURN
    <li>
    <a href="nano.com/$username"><img class="avatar" src="images/$picture" width="48" height="48" alt="avatar" /></a>
    <div class="tweetTxt">
    <strong><a href="nano.com/$username">$username</a></strong> $auto
    <div class="date">$rel</div> <a class ="reply" href="home.php?replyto=@$username&status_id=$id&reply_name=$username"> reply </a>

    </div>
    <div class="clear"></div>
    </li>
ENDOFRETURN;

the reply link jquery:

function insertParamIntoField(anchor, param, field) {
       var query = anchor.search.substring(1, anchor.search.length).split('&');

       for(var i = 0, kv; i < query.length; i++) {
          kv = query[i].split('=', 2);
          if (kv[0] == param) {
            field.val(kv[1]);
             return;
          }
       }
    }



$(function () {
    $("a.reply").click(function (e) {

      insertParamIntoField(this,"status_id",$("#status_id"));
      insertParamIntoField(this,"reply_name",$("#reply_name"));
       insertParamIntoField(this, "replyto", $("#inputField"));



     $("#inputField").focus()

$("#inputField").val($("#inputField").val() + ' ');


     e.preventDefault();
       return false; // prevent default action
    });
});

Answer 1

I'm taking a shot in the dark but it sounds like you haven't used a .live() event on the reply buttons. Any new buttons being appended to the document will not have the click event that you specified for them attached.

So in short make sure any buttons that are loaded dynamically and need to fire off an event are using a 'live' event binding.

Answer 2

Change your click handler to use .live() like this to make it work on links added later as well.:

$(function () {
  $("a.reply").live("click", function (e) {
     insertParamIntoField(this, "status_id", $("#status_id"));
     insertParamIntoField(this, "reply_name", $("#reply_name"));
     insertParamIntoField(this, "replyto", $("#inputField"));
     $("#inputField").val(function(i, v) { return v + ' '; }).focus();
     return false;
  });
});