J'ai une ancrage et j'ai joint un rappel onclick à celui-ci, donc une fois cliqué, une demande AJAX est déclenchée qui appelle une vue qui supprime l'image de la base de données. Il devrait également supprimer Quand j'ai testé le code de dépose divisé dans Jsfiddle , ça fonctionne. L'image est supprimée avec succès de la base de données et Delete_View est impliquée dans le processus. J'ai également essayé de Quelle pourrait être la raison? p> html: p> jQuery: p> vue: p> code> tout à fait, cependant, cela ne se produit pas pour une raison quelconque. CONSOLE.LOG CODE> à partir de l'intérieur du raccord de réussite et je peux voir un message de débogage. console.log ($ (ceci) .Parents ('. Image-aperçu')); code> renvoie objet {longueur: 0, prevObject: objet (1)} code> Je pense que le sélecteur échoue. P> def delete_view(request, id):
img = get_object_or_404(TemporaryImage, id=id)
img.delete()
return HttpResponse('successfull')
4 Réponses :
Essayez ce code pour JQuery.
Vous devez stocker var $deleteClicked = function(event) {
var url = Urls.deleteTempImage(event.target.id);
var storedThis = $(this);
$.ajax({
url: url,
data: {
'id': event.target.id
},
success: function (data) {
console.log('spam');
storedThis.parents('.image-preview').remove();
}
});
}
$(document).on('click', '.delete-temp-image-link', $deleteClicked);
Aussi, notez que j'ai utilisé jQuery Pour chaque élément de l'ensemble, obtenez le premier élément qui correspond à la
sélecteur en testant l'élément lui-même et traversant sa
ancêtres dans le Dom Tree.
Découvrez la page DOCS pour une description des différences entre $ (ceci) n'est pas disponible pour votre fonction de rappel de clic nommé. Un moyen de rendre votre code plus explicite serait de stocker $ (this) , comme d'autres personnes ont dit - ou simplement utiliser le ID que vous passez déjà. Par exemple: .closest () au lieu de .Parents () . De JQOWERY DOCS , .CLOSEST () Est-ce que ce qui suit: < / p>
.cosest () et .Parents () . La principale différence est que .closest () ne traverse que l'arbre DOM jusqu'à ce qu'il trouve une correspondance, plutôt que de traverser tout le chemin jusqu'à l'élément racine. Je doute qu'il y ait d'énormes implications de performance, mais puisque vous sélectionnez un seul , c'est un code légèrement plus précis.
0 commentaires
Même problème se produit aussi. En fait '$ (ceci)' est délicat car il peut sembler.
'$ (ceci)' ne peut pas être utilisé dans la fonction de réussite car elle a perdu la portée de la fonction de réussite. Essayez de définir «$ (ceci)» en dehors du succès (c'est-à-dire avant Ajax), par exemple
const élément = $ (ceci)
puis dans votre fonction de réussite:
élément.parents ('. image-aperçu'). Supprimer ();
Cela devrait certainement résoudre votre problème.
J'espère que cela vous aidera!
Comme je l'ai suggéré dans ma réponse.
Peut-être $ (ceci) est-il utilisé dans un mauvais contexte? Essayez de le stocker avant $ .AJAX
@Andreasschmidt Vous avez raison. Vous pouvez poster une réponse si vous aimez, je serais heureux d'accepter.