使用Ajax添加後刪除評論

-1

所以我只是用codeigniter製作一個小博客項目。我試圖做的是一旦添加了評論，我希望能夠刪除它。刪除評論適用於較舊的評論，但不適用於添加的較新評論。爲了將它們刪除，頁面必須刷新。我已經查看了一些在stackoverflow上的答案，但沒有一個似乎是我的問題。問題是當我點擊刪除我的新評論，它沒有註冊我甚至點擊了元素。如果你看下面，我添加了一個console.log測試，當我單擊元素時應該顯示該測試，但沒有任何反應。我將如何解決這個問題？使用Ajax添加後刪除評論

編輯：我注意到在控制檯（使用Firefox）的東西。在刪除元素附近有一個黑色的小盒子，裏面寫着「ev」。它出現在旁邊的其他評論，但不是新的評論。

編輯：好的，我應該做得更多一點挖掘，我找到了答案：

變化

$(".com-delete").click(function()

$(document).on("click",".com-delete",function()

代碼：

<script> 
$(document).ready(function(){ 
    $("#comment").submit(function(event){ 
     event.preventDefault(); 
     var body = $("textarea#body").val(); 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url(); ?>" + "comments/add_comment/" + "<?php echo $post['id']; ?>", 
      dataType: "json", 
      data: {"body":body}, 
      complete: function (xhr, status) { 

       if (status === 'error' || !xhr.responseText) { 
        console.log(status); 
       } 
       else { 
       var html = "<div class='well'><h5>"+body+"</h5><p><em>By:<strong><?php echo $this->session->userdata('username'); ?></strong></em><span class='com-delete' id='"+xhr.responseText+"' >remove</span></p></div>"; 

       $("#comment").after(html); 

       $("#body").val(""); 

       $("#nocomments").html(""); 
       } 
      } 
     }); 
    }); 

    $(".com-delete").click(function(){ 
     //WORKS WITH OLD COMMENTS BUT NOT WITH NEW COMMENTS 
     console.log("test"); 

     var el = $(this); 
     var com_id=el.attr('id'); 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url(); ?>" + "comments/delete_comment/"+com_id, 
      success: function() { 
       el.closest("div").remove(); 
      } 
     }); 
    }); 
}); 
</script>

來源

2017-10-09 Megan

從

$(".com-delete").click(function(){

要

$(document).on("click",".com-delete",function(){

$(".com-delete").on("click", function(){

然後將動態添加的內容合作。

因爲：

的Click() - 高度只有當要素在HTML代碼中已存在的事件處理程序。這會不會考慮這是動態創建新元素

編號： http://api.jquery.com/on/

委託事件有優勢，他們可以處理來自被添加到文檔在子孫元素事件晚點。

來源

2017-10-09 19:18:51

哈哈我剛剛發現之前你的答案發布。但感謝您的幫助 – Megan

問題是，通過AJAX添加DOM元素不被jQuery識別，因爲事件偵聽器是在某些元素之前創建的。例如，你可以定義一個JavaScript函數來刪除一個ID或這個項目。然後生成函數調用，像onclick =「return deleteThisElement（this）;」

來源

2017-10-09 19:19:06

使用Ajax添加後刪除評論

回答

相關問題