javascript - jQuery AJAX 单击 DELETE 方法未一致触发

Question

我有一个 AJAX 方法，它为正在单击的链接触发 DELETE 方法，但是尽管我的 jQuery 工作过一次，但我还没有达到 AJAX 方法被触发的程度，并且无法确定什么代码错误。可能是由于未捕获的语法错误造成的。 onload console.log 触发，因此我知道该文件正在被识别，但单击内的 console.log 未触发。另外，这是触发DELETE方法的最佳方式吗？

这是 jQuery:

window.onload = function() {
    console.log("Window loaded")
    $('#blog-comment-delete').click(function(){
        var blogId = $(this).data("blog-id");
        var commentId = $(this).data("comment-id");
        var urlPath = '/app/blog/' + blogId + '/comment/' + commentId;
        console.log('Pre-AJAX');
        $.ajax({
            method: 'DELETE',
            url: urlPath,
            success: function(){
                window.location.replace('/app');
            },
            error: function(error){
                console.log('Deletion Error: ' + error);
            }
        });
    });
};

使用 Node.js 的应用程序路由:

appRoutes.route('/blog/:blogId/comment/:blogCommentId')

    .delete(function(req, res){
        models.BlogComment.destroy({
            where: {
                blogId: req.params.blogId,
                blogCommentId: req.params.blogCommentId,
                userId: req.user.userId
            }
        }).then(function(){
            req.flash('info', 'Comment was successfully deleted.');
            res.send('Comment was deleted.');
        });
    });

链接:

<div class="blog-comments">
    {{#blog_comments}}
            <p id="blog-comment">{{comment}}</p>
            <a href="#" id="blog-comment-delete" data-blog-id="{{blogId}}" data-comment-id="{{blogCommentId}}">Delete</a>
    {{/blog_comments}}
</div>

Answer 1

使用类名代替 id 作为选择器。 Id 是唯一的，如果同一页面上有多个具有相同 id 的元素，您的事件监听器将会中断。因此，请执行以下操作:

<div class="blog-comments">
    {{#blog_comments}}
            <p id="blog-comment">{{comment}}</p>
            <a href="#" class="blog-comment-delete" data-blog-id="{{blogId}}" data-comment-id="{{blogCommentId}}">Delete</a>
    {{/blog_comments}}
</div>

您的事件监听器应如下所示:

$('.blog-comments').on('click', '.blog-comment-delete', function(){
});