Question

我有一个AJAX方法，它正在触发正在被点击的链接的DELETE方法，但是尽管我的jQuery工作了一次，但我没有达到AJAX方法被触发的程度，并且无法实现确定代码有什么问题。可能是由于未捕获的语法错误。触发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

使用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>

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

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

Answer 2

你可以这样试试 1）

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

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

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

3）

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

jQuery AJAX单击DELETE方法不会一直触发

2 个答案: