Removing appended div box using jquery ajax

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">&nbsp;<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

您必须对动态添加的元素使用委托：

$(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">&nbsp;<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;
    });

});