javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮

Question

我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除 按钮。问题是 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");

                }
            }
        })

    })

});

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

Answer 1

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

 $(document).ready(function(){ 

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

这将监听与您的选择器匹配的尚未创建的元素的点击。以下是 JQuery API 文档页面以获取更多信息:http://api.jquery.com/on/