jQuery onlick事件在AjAX成功调用中不起作用

如何解决jQuery onlick事件在AjAX成功调用中不起作用

我正在开发一个简单的博客帖子，用户可以在其中发表评论和喜欢。我在动态内容方面遇到了一些问题。当用户对帖子发表评论时，我会动态添加内容。

 <script>
    $(document).ready(function () {
      
        $('#post-comment-{{my_post['_id'] | string}}').on('click',function () {
            var post_id = $(this).attr('post_id');
            var comment_content = $('#comment-textarea-' + post_id).val();
            req = $.ajax({
                url: '/post_comments',type: 'POST',data: { post_id: post_id,comment_content: comment_content }
            });
            req.done(function (response) {
                var content = '<div class="mb-3">' +
                    '<div class="row align-items-top">' +
                    '<div class="col-auto ml-5"><img src="' + response.profile_pic + '" class="rounded-circle" /></div>' +
                    '<div class="col ml-n2">' +
                    '<a href = "/user_profile/' + response.user_id + '"><h1>' + response.first_name + ' ' + response.last_name + '</h1></a>' +
                    '<p class="small text-muted"><span class="far fa-clock mr-1"></span>' + str + '</p>' +
                    '<p>' + response.comment_content + '</p>' +
                    '</div>' +
                    '<div class="col-auto">' +
                    '<div class="dropdown">' +
                    **'<a href="#!" id="delete-comment-'+response.post_id+'-'+response.comment_id+'" role="button">' +
                    '<i class="fa fa-times" aria-hidden="true"></i>' +
                    '</a>' +**
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                $('#view-post-comments-{{my_post['_id'] | string}}').append(linkify(nl2br(content)));
                $('#comments-{{my_post['_id'] | string}}').html('<i class="far fa-comments mr-1 "></i>' +
                    'Comments (' + response.comment_count + ')');
            });
        });
    });
</script>

这是我的Delete ajax代码：

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click','#delete-comment-{{my_post['_id'] | string}}-{{post_comments._id | string}}',function () {
            $('#delete-comment-modal-{{my_post['_id'] | string}}-{{post_comments._id | string}}').modal('show');
        });
        $('#confirm-comment-delete-button-{{my_post['_id'] | string}}-{{post_comments._id | string}}').on('click',function () {
            var post_id = $(this).attr('post_id');
            var comment_id = $(this).attr('comment_id');
            req = $.ajax({
                url: '/delete_comments',comment_id: comment_id }
            });
            req.done(function (response) {
                $('#delete-comment-modal-{{my_post['_id'] | string}}-{{post_comments._id | string}}').modal('hide');
                $('#comments-{{my_post['_id'] | string}}').html('<i class="far fa-comments mr-1 "></i>' +
                    'Comments (' + response.comment_count + ')');
                $('#show-each-comment-{{my_post['_id'] | string}}-{{post_comments._id | string}}').remove();
            });
        });
    });
</script>

如果代码是DOM和静态的，则现在可以正常工作。 对于我在第一个ajax成功调用中生成的动态内容，它不起作用。我需要刷新页面才能删除它。任何帮助都会得到应用。

解决方法

我创建了dunamic模态，并在ajax中将其链接称为itsemf。