I have two html here. The first one is dynamically generated by php and second one is just html to test.

I also have the following jquery.

When I click a cross with class delete in the second ones(plain html), it works nicely. However when I click a cross in the first ones, it does not work. It redirect me to the home page with # at the end.

I am hoping someone point out what I am doing wrong.

Thank in advance.

HTML

First part (dyanmicall generated)
<ul style="display: block;" id="message">
<li class="41">
<span class="user"><strong>shin</strong></span>
<span class="msg">  delete this as well</span>
<span class="date">2010-01-15 07:47:31</span>
<a href="#" id="41" class="delete">x</a>
    <div class="clear"></div></li>
<li class="40">
<span class="user"><strong>shin</strong></span>

<span class="msg">  delete me as well</span>
<span class="date">2010-01-14 16:01:44</span>
<a href="#" id="40" class="delete">x</a>
    <div class="clear"></div></li>
...
...</ul>


Second part which is plain html
    <ul id="another">
    <li><a href="#">you can't delete me</a></li>
    <li><a href="#" class="delete">delete this</a></li>
    <li><a href="#" class="delete">delete this</a></li>
    </ul>

Here is jquery

$(".delete").click(function(event) {
    event.preventDefault();


loading.fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
// var string = 'id='+ id ;

$.ajax({
   type: "POST",
   url: "index.php/admin/messages/changestatus/"+id,
   // data: string,
   cache: false,
   success: function(){
    commentContainer.slideUp('slow', function() {$(this).remove();});
    loading.fadeOut();
  }

 });


return false;
    });

I am using CodeIgniter by the way.