Javascript 使用.on（）将事件附加到带有jquery的页面上的动态插入按钮

我有一个页面，在那里我返回用户的帖子，这些帖子可以使用一些jquery代码进行动态评论，在发布新评论后，我会在帖子下方插入新评论，并使用

Delete

按钮。问题是

Delete

按钮在新插入的元素上不起作用，除非我重新加载页面。我读到解决方案使用的是.on（）方法，但是我对如何实现这一点有点困惑。 我有一个函数用新插入的注释更新帖子部分，这是删除注释的函数：

$(document).ready(function () {

    $("button[id*='deletecmnt_']").click(function () {

        var id = this.id.replace('deletecmnt_', '');

        var comment_card_id = ('#comment_' + id);

        var token = $(this).data('token');

        $.ajax({
            url: '../comment/' + id,
            type: 'post',
            data: {_method: 'delete', _token: token},
            success: function () {


                // Checks for display of comment card and removes it
                if ($(comment_card_id).is(":visible")) {

                    $(comment_card_id).fadeOut("fast");

                }
            }
        })

    })

});

---

我不明白这里需要更改什么以及如何更改。

您需要对动态添加的元素使用事件委派。在.on（）方法中，需要添加希望处理程序在创建后附加到的选择器

 $(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function () {
    // codes
    }
 });

---

这将侦听与选择器匹配的尚未创建的元素上的单击。以下是JQuery API文档页面，了解更多信息：

您需要对动态添加的元素使用事件委派。在.on（）方法中，需要添加希望处理程序在创建后附加到的选择器

 $(document).ready(function(){ 

    $("body").on("click", "button[id*='deletecmnt_']", function () {
    // codes
    }
 });

---

这将侦听与选择器匹配的尚未创建的元素上的单击。以下是JQuery API文档页面，了解更多信息：

是否可以将代码减少到最低限度。现在需要做的事情很多请稍候，我还将尝试建议在关键点放置

console.log（“called”）

，以查看代码的某些点是否未被调用。查找问题非常有用。这是一个很好的编辑@Chriz74，请记住其他问题：）是否可以将代码减少到最低限度。现在需要做的事情很多请稍候，我还将尝试建议在关键点放置

console.log（“called”）

，以查看代码的某些点是否未被调用。查找问题非常有用。这是一个很好的编辑@Chriz74，在其他问题上请记住：）美元（document）.ready（函数（）是我代码的一部分吗？我必须删除它还是不重要？

$（document）.ready（…）

是必需的，否则当您声明它们时，

body

或DOM的其他元素上的处理程序可能不存在。很高兴我能提供帮助。请记住接受答案。$（文档）。ready（函数（）是我代码的一部分吗？我必须删除它还是不重要？

$（文档）。ready（…）

是必需的，否则当您声明它们时，

body

或DOM的其他元素上的处理程序可能不存在。很高兴我能提供帮助。请记住接受答案。