J'ai une méthode AJAX qui déclenche une méthode DELETE pour le lien sur lequel on clique, mais malgré le fait que mon jQuery fonctionne une fois, je n'atteins pas le point où la méthode AJAX est déclenchée et je ne peux pas déterminer ce qui ne va pas avec le code. Cela pourrait-il être dû à une erreur de syntaxe non interceptée. Le onload console.log se déclenche donc je sais que le fichier est en cours de reconnaissance, mais le console.log dans le clic ne se déclenche pas. De plus, est-ce le meilleur moyen de déclencher la méthode DELETE?

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

Itinéraire d'application à l'aide de 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.');
        });
    });

Lien:

<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>
1
cphill 14 janv. 2017 à 23:35

2 réponses

Meilleure réponse

Au lieu des identifiants, utilisez classname à utiliser comme sélecteurs. Les identifiants sont uniques et s'il y a plusieurs éléments sur la même page avec le même identifiant, vos écouteurs d'événements seront interrompus. Alors faites plutôt:

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

Et votre auditeur d'événement devrait ressembler à:

$('.blog-comments').on('click', '.blog-comment-delete', function(){
});
2
Kees van Lierop 14 janv. 2017 à 20:55

Vous pouvez l'essayer comme ça 1)

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

2) si le 1er ne fonctionne pas, alors:

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

3)

$('body').delegate('#blog-comment-delete','click',function(){
     //Your code
    });
-1
Asim Zaka 14 janv. 2017 à 20:51