Question

所以我只是用codeigniter做一个小博客项目。我想要做的是一旦添加了评论，我希望能够删除它。删除注释适用于较旧的注释，但不适用于添加的较新注释。为了删除它们，必须刷新页面。我已经查看了stackoverflow上的一些答案，但似乎没有一个是我的问题。问题是当我点击删除我的新评论时，它没有注册我甚至点击了该元素。如果你看下面我添加了一个console.log测试，它应该在我点击元素时显示，但没有任何反应。我该如何解决这个问题？

编辑：我在控制台中发现了一些东西（使用firefox）。在删除元素附近有一个黑色的小盒子，上面写着“ev”。它出现在其他评论旁边，但不是新评论。

编辑：好的，我应该多做一点挖掘，我找到了答案：

更改

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

TO

$(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>

Answer 1

发件人

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

要

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

或

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

然后它将使用动态添加的内容。

<强>因为：

Click() - 只有在html代码中已存在该元素时才附加事件处理程序。这不会考虑动态创建的新元素

<强>价： http://api.jquery.com/on/

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

Answer 2

问题是，通过AJAX添加的DOM元素不被jQuery识别，因为事件监听器是在特定元素之前创建的。例如，您可以定义一个JavaScript函数来按ID或由此删除项目。然后生成函数调用，如onclick =＆＃34; return deleteThisElement（this）;＆＃34;

添加Ajax后删除注释

2 个答案: