使用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添加后删除评论

回答

相关问题