通過jQuery將內容追加到div

Question

我的項目是一種博客，帶有帖子和評論區域。 我正在嘗試使其與jquery ajax異步。 我的問題是，當異步插入新注釋時，它會在div中出現兩次，而所有其他注釋都消失。 如果我刷新頁面，看起來不錯。

視圖：

<section id="comments_section_<?php echo $p1['post_id'];?>"> //THIS IS THE OUTPUT WHERE NEW COMMENTS WILL BE APPENDED

     <?php 
       $data['comments'] = $this->model_mutamba->getComments($p1['post_id']); 

       if($data['comments'] != ""){ ?>
               <div class="comments_container" id="comments_container_<?php echo $p1['post_id'];?>">

        <?php   foreach ($data['comments'] as $c){ 
                $user_img3 = $this->model_mutamba->getUserPicId($c->aluno_id);
               ?>
             <div>
                <img style="height:32px;" src="<?php echo site_url();?>img/users/portfolio/<?php echo $user_img3;?>" alt="" class="align-left" />
                <p>
                    <?php echo $this->model_mutamba->addSmilies($c->comment);?>
                    <br>
                    <span class="comments_date">
                        <?php 
                              $c_date = explode('-', substr($c->comment_date,0,-8));

                              $date_num_word = monthNumToWords($c_date[1]);

                        echo substr($c->comment_date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0];?>
                    </span>

                </p>

           </div>


      <?php } ?>
       </div>

       <?php  } ?>

 </section>

JS：

 function comment(post_id,input){


    var comment = $(input).val();
    var output = '#comments_section_'+post_id;

    if(comment != ""){
        $.ajax({
                type:"POST",
                url:base_url+"mutamba/insertNewComment",
                data: {comment: comment, post_id:post_id},
                cache:false,
                success:function(response){
                    $(output).html(response);
                $(output).append(response);

                }
        });


    }
}

控制器：

function insertNewComment(){
     if($this->session->userdata('is_logged_in')){

            $email= $this->session->userdata('email');
            $comment= $this->FilterData($this->input->post('comment'));
            $post_id= $this->FilterData($this->input->post('post_id'));

            $this->load->model('model_mutamba');
            if($this->model_mutamba->insertNewComment($email,$comment,$post_id)){
                  $this->load->model('model_user');


                 $count = $this->model_mutamba->countPostComments($post_id);
                  ?>
                <script>
                var count = '<?php echo $count;?>';
                var comments_count = '<?php echo "#comments_count_".$post_id;?>';
                var content = "";

                if(count == 1){
                    content = '<span  class="comments_count">'+count+'</span> Comentário';
                }else{
                     content = '<span  class="comments_count">'+count+'</span> Comentários';
                }

                $(comments_count).html(content);

                </script>

                     <?php 
                     $this->load->model('model_user');
                    $user_img = $this->model_user->getUserPic($email);

                           echo '
                         <div>
                            <img style="height:32px;" src="'.site_url().'img/users/portfolio/'.$user_img.'" alt="" class="align-left" />
                            <p>
                               '.$this->model_mutamba->addSmilies($comment).'
                                <br>
                                <span class="comments_date">';
                                           $date = date(date('Y-m-d H:i:s'));
                                          $c_date = explode('-', substr($date,0,-8));

                                          $date_num_word = monthNumToWords($date[1]);

                                    echo substr($date, 11,-3)." ".$c_date[2]." de ". $date_num_word . " ". $c_date[0].'
                                </span>

                            </p>

                       </div>';




            }

      }else{
         redirect("inicio");
            }

 }

將不勝感激，在此先感謝

Answer 1

之所以發生這種情況，是因為在AJAX success回調中，您正在向output TWICE添加響應-一次使用.html() ，然后再次使用.append() 。

.html(response)會刪除您網頁中的先前HTML，這就是為什么您看不到其他注釋並為其添加response的原因。

使用.append(response) ，它將response添加到div的底部，這就是您兩次看到響應的原因！

從success回調中刪除 $(output).html(response) ，它將正常工作。

因此，您的函數需要如下所示：

 function comment(post_id,input){
    var comment = $(input).val();
    var output = '#comments_section_'+post_id;

    if(comment != ""){
        $.ajax({
                type:"POST",
                url:base_url+"mutamba/insertNewComment",
                data: {comment: comment, post_id:post_id},
                cache:false,
                success:function(response){
                  $(output).append(response);
                }
        });
    }
}

Answer 2

function comment(post_id,input){
var comment = $(input).val();
var output = '#comments_section_'+post_id;

if(comment != ""){
    $.ajax({
            type:"POST",
            url:base_url+"mutamba/insertNewComment",
            data: {comment: comment, post_id:post_id},
            cache:false,
            success:function(response){
                //$(output).html(response);    //Comment this line or the line below it.
            $(output).append(response);
            }
    });
}

}

Answer 3

<div id="appenddiv">
  <h1>append</h1>
</div>

<script type="text/javacript">
 $("#appenddiv").append('<b>hello world</b>');

</script>