Removing appended div box using jquery ajax - php

Question

I have to implement two functions, append and delete on set of comments. The insertion and deletion are working properly unless in one case.
When i try to remove newly added comment (before refreshing page), it wont remove. But when i refresh the page that comment removes swiftly.
Here's some code.
Following ajax is appending and removing the comment div.
<script type="text/javascript">
$(function() {
$(".commentbutton").click(function()
{
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='')
{
alert("Please enter your comment");
}
else
{
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$('.delcombutton').click(function()
{
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
</script>
Structure of my div
echo "<div id='post{$postseq}'>";
while($commentonpost=mysql_fetch_array($resultcomm)){
if($commentonpost['visible']==1){
echo '
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;" id="comment'.$commentonpost['commentid'].'">
<div style="width:10%;float:left;"><a href="profile.php?user='.$commentonpost['usernick'].'" >'.$commentonpost['fname']." ".$commentonpost['lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;">'.$commentonpost['comment'].'</div>
<div style="width:8%;float:right;margin-left:2%;">
';
if($commentonpost['usernick']==$_SESSION['user_nick']){
echo ' <form action="" method="post">
<input type="submit" name="delcomm" value="X" class="delcombutton" id="'.$commentonpost['commentid'].'">
</form>
';
}
echo '<h5 class="msg">'.datetime($commentonpost['date']).'</h5>
</div>
<br/>
</div>
';
}
}
echo "</div>";
echo '
<form name = "form'.$postseq.'" method = "post" action="" onsubmit="return validateform()" style="width:100%">
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;">
<div style="width:10%;float:left;"><a href="profile.php?user='.$_SESSION['user_nick'].'" >'.$_SESSION['user_fname']." ".$_SESSION['user_lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;"><textarea placeholder="Comment..." name="commenttext" id="commenttext'.$postseq.'" class="inputcomment" ></textarea></div>
<br>
<input type="submit" id="'.$postseq.'" name="SubmitComment" value="Comment " class="commentbutton" style="font-size:1em;width:100px;float:right;margin-top:4px;margin-right:9%;">
</div>
</form>
</div>
';
PS: Sorry for such a raw code, i have very limited internet now.

Answer 1

You have to use delegation for dynamically added elements:
$(document).on('click','.delcombutton',function(){...});

Answer 2

Use event delegation model with .on() for dynamically added elements
$(function() {
$(document).on('click', '.commentbutton', function() {
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='') {
alert("Please enter your comment");
}
else {
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$(document).on('click', '.delcombutton', function() {
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});