Afficher une confirmation en ligne avec jQuery

Question

J'essaie de créer une confirmation "Êtes-vous sûr" pour un lien, similaire à celle du bouton de rapport sur les messages Reddit. Lorsque l'on clique dessus, le lien est remplacé par le texte "Are you sure Yes / No" où "yes" effectue l'action et "no" rétablit le lien. Je parviens à remplacer le lien par la confirmation, mais je n'arrive pas à faire en sorte que le lien "non" masque la confirmation.

Le code correspondant :

<span id="confirm"><a href="#>Confirm</a></span>

<script type="text/javascript">
$(function() {

   $("#confirm").click(function() {
     $(this).html('Are you sure? <a href="#">Yes</a> / <a id="unconfirm" href="#">No</a>');
   });

   $("#unconfirm").click(function() {
     $(this).parents("span").html('<a href="#">Confirm</a>');
   });

 });
</script>

Answer 1

El #unconfirm n'existe pas dans le DOM au moment où la liaison d'événement est exécutée. Vous devez déléguer le gestionnaire d'événement plus haut dans l'arbre DOM :

$(document).on("click", "#unconfirm", function() {
    $(this).parents("span").html('<a href="#">Confirm</a>');
});

Cela utilise le .on() qui liera le gestionnaire d'événements à l'élément sélectionné (l'attribut document ) mais n'exécute la fonction du gestionnaire que si l'événement a pour origine un élément correspondant au deuxième argument ( #unconfirm ).

Notez que .on() a été ajouté dans la version 1.7 de jQuery. Si vous êtes coincé sur une version plus ancienne, vous pouvez utiliser .delegate() à la place.

Notez également qu'il serait plus efficace de remplacer document avec un autre élément ancêtre (puisque l'événement a alors moins de distance à parcourir jusqu'à ce qu'il déclenche le gestionnaire d'événement délégué).

Answer 2

Puisque votre #unconfirm est généré dynamiquement, vous devez utiliser la délégation avec l'élément on() pour joindre l'événement :

$(closestStaticParent).on('click', '#unconfirm', function() { ... })