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

Question

我有一个页面，我 return 用户 posts，这些 posts 可以在新评论后使用一些 jquery 代码即时评论是 posted 我在 post 下插入新评论以及 Delete 按钮。问题是 Delete 按钮在新插入的元素上不起作用，除非我重新加载页面。我读到解决方案是使用 .on() 方法，但是我对如何实现它有点困惑。我有一个函数用新插入的评论更新 post 部分，这是删除评论的函数：

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

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

 $(document).ready(function(){ 

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

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

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

Attaching event to dynamic inserted button on page with jquery using .on()

javascript

jquery

events

dynamically-generated