J'ai récupéré quelques lignes de la base de données par requête ajax et ajoutées à ma page HTML. Je veux supprimer un enregistrement en utilisant ajax mais cela ne fonctionne pas.

$(document).ready(() => {
  $.getJSON("/admin/getMakes", data => {
    $.each(data, (i, makes) => {
      $("ul#makes").append(
        '<li class="list-group-item">' +
          makes.makeName +
          ' <a href="#",id="deleteMake",data-id=' +
          makes._id +
          '><i class="fa fa-trash" ></i></a>' +
          "</li>"
      );
    });
  });


  $("#deleteMake").on("click", function(e) {
    alert("clicked");
    // var id = $(this).attr("data-id");
    // $.ajax({
    //   type: "DELETE",
    //   url: "/admin/deletemake" + id,
    //   success: function(response) {
    //     $(this).hide();
    //     //window.location.href = "/admin/deletemake";
    //   },
    //   error: function(err) {
    //     console.log(err);
    //   }
    // });
  });
});

J'ai ajouté une alerte pour vérifier si cela fonctionne mais cela ne fonctionne pas donc l'erreur n'est pas dans la demande.

0
Hama Saadwn 11 mars 2019 à 16:20

2 réponses

Meilleure réponse

1) <a href="#",id="deleteMake", - il ne doit y avoir aucune virgule dans une balise HTML. Remplacez les virgules par des espaces.

2) Pour mettre le gestionnaire en place, plutôt que dans un bloc suivant :

.append(
    $('<li class="list-group-item"></li>')
        .append(
            $('<a href="#"></a>')
                .on('click',function(e){
                    alert(makes._id);
                    // You don't actually want the browser scrolling to #
                    e.preventDefault();
                })
                .append('<i class="fa fa-trash" ></i>')
        )
)

Si vous laissez le code de votre style, vous pouvez attacher l'événement comme ceci :

    $("ul#makes")
        .append(
            $(
                '<li class="list-group-item">' +
                    makes.makeName +
                    ' <a href="#" id="deleteMake">d</a>' +
                "</li>"
            )
            .on('click','#deleteMake',function(
                alert(makes._id);
                // You don't actually want the browser scrolling to #
                e.preventDefault();
            )
        );

Dans votre code, les événements sont également attachés avant que le contenu ne soit généré, car le rappel du résultat XHR est certain de se produire une fois l'exécution du thread principal terminée. Ce problème ne se produit avec aucun des codes ci-dessus. Si vous DEVEZ définir des gestionnaires avant que le contenu ne soit généré, utilisez la délégation .on() :

$("ul#makes").on("click", "#deleteMake", function(e){
    alert($(this).data('id'));
    // You don't actually want the browser scrolling to #
    e.preventDefault();
});
1
Dinu 11 mars 2019 à 14:08

La première erreur - id doit être unique. La seconde est une délégation d'événement incorrecte. Le troisième - faute de frappe dans href="#",id="deleteMake",data-id

Réparons-les tous :)

Corrigez les fautes de frappe et utilisez class

$("ul#makes").append(
  '<li class="list-group-item">' 
    + makes.makeName +
    '<a href="#" class="deleteMake" data-id=' + makes._id + '>' +
      '<i class="fa fa-trash" ></i>' +
    '</a>' +
  '</li>'
);

Résoudre le problème de délégation

$("#makes").on('click' '.deleteMake', function(e) {
  alert("clicked");
})
2
Evgeniy 11 mars 2019 à 13:28