Javascript jQuery AJAX单击删除方法不一致触发

我有一个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);
            }
        });
    });
};

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>

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

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);
            }
        });
    });
};

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>

链接：

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);
            }
        });
    });
};

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>

{{{博客评论}
{{comment}
{{/blog_comments}}

你可以这样试试 (一)

2） 如果第一次不起作用，则：

$( "body" ).on( "click", "#blog-comment-delete", function() {
       //Your code
    });     

(三)

---

使用classname作为选择器，而不是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>

---

可能有多个元素具有相同的id

blog comment delete

？@KeesvanLierop有。它用于每个注释。我应该使用其他唯一的标识符来准确触发它吗？一个id应该总是唯一的，并且只能在同一页上出现一次，所以这可能是冲突。将此更改为类名（请参见我的答案）@KeesvanLierop解决了我的问题，谢谢！我没有意识到ID和类的使用会影响jQuery方法！刚刚创建了我的答案：）