I am using $.post to add new group name to DB and show newly created group to the user. Here is the code:

2.  $('#new_group').click(function(){
3.         var name = $("#group_name").val();
4. 
   
5.         $.post("/async/addgroup",{
6.             "name" : name
7.         }, function(response){
8.             var id = response;
9.             var echo_str = $("<div id='group_"+id+"'><strong>Name:</strong> <div class='editgroup' id='"+id+"'>"+name+"</div><a href='#' class='clickeditgroup'>Edit</a> | <a href='#' id='"+id+"' class='deletegroup'>Delete</a></div>");
10.             $("#group_names").prepend(echo_str.hide().fadeIn());
11.             $("#group_name").val("");
12.         });
13.         
14.         return false;
15.     });

this work well, but when the new div is created (fadedIn) I am not able to click the edit and delete button. I have to refresh the page to make them work.

Here is the code for deleting group

2. $('.deletegroup').bind('click',function(){
3.         var id = $(this).attr('id');
4.         
5.         $('#group_'+id).fadeOut(1000,function(){
6.             $('#group_'+id).remove();
7.         });
8.         return false;
9.     });

I have compared the HTML code before and after reloading page and it is the same.

I am really confused. Any Ideas?

Any help would be much appreciated.

P.