Question

我必须实现两个函数，在注释集上追加和删除。除非在一种情况下，插入和删除工作正常。当我尝试删除新添加的评论（刷新页面之前），它不会删除。但是当我刷新评论快速删除的页面时。

这是一些代码。在ajax之后添加并删除注释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>

我的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：很抱歉这样的原始代码，我现在的互联网非常有限。

Answer 1

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

$(document).on('click','.delcombutton',function(){...});

Answer 2

将事件委托模型与.on()一起用于动态添加的元素

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

});

使用jquery ajax删除附加的div框

2 个答案: