Question

    <div class="btn-group pull-right comment-icons">

      <button type="button" class="btn btn-default btn-xs delete-comment"  title="Delete" data-toggle="modal" data-target="#myModal"><!---->
         <span class="glyphicon glyphicon-trash"></span>
      </button>

    </div>

我试图实现.on点击事件处理程序，以删除进入dom的新元素。但是，我发布的代码仅适用于当前元素而不适用于未来元素。有人能够解释代码中的问题可能是什么。非常感谢。

$(".comment-icons").on("click", ".delete-comment",

function (e) {
    e.preventDefault();
    var $this = $(this);
    var author_id = parseInt($this.parents(".message").data("author"));
    var comment_id = parseInt($this.parents(".message").data("comment"));

    $(".modal-footer").off("click").on("click", ".confirm-delete", //want to add or on press enter

        function (e) {
            e.preventDefault();
            $('#myModal').modal('hide');
            $.post("/comment/deletecomment",
                {comment_id: comment_id, author_id: author_id},
                function (response) {

                    var id = response.comment_id;
                    console.log(response);

                    var comment_count_holder = $this.parents(".comments-area").find(".comment-count");
                    if(comment_count_holder.length != 0){

                        var comment_count = comment_count_holder.data("commentcount");

                        comment_count = comment_count - 1;
                        comment_count_holder.data("commentcount", comment_count);
                        comment_count = comment_count_holder.data("commentcount");
                        if(comment_count >3){
                            comment_count_holder.html("View all "+comment_count+" comments")
                        }
                        else{
                            comment_count_holder.hide();
                        }
                    }

                    $("div#"+id).remove();

                },
                'json'
            );

        });

});

Answer 1

正如我在评论中所说，将click听众附加到body元素应该有效：

$("body").on("click", ".comment-icons .delete-comment", ...)

Per the documentation：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。

因此，新的.comment-icons元素不会附加事件。相反，通过将事件附加到body元素，然后再指定.comment-icons，您使用的是委托事件：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

至少这就是我认为它发生的原因。它也与其他事情有关，但我并不完全确定。

.on点击jquery删除评论

1 个答案: