Bonjour,

Je m'entraîne actuellement avec Jquery et je souhaite , dans le cadre d'un projet de réseau social , pouvoir offrir la possibilité de s'abonner/désabonner.

Cependant, si un utilisateur s'abonne et veut se désabonner dans la foulée , le bouton de désabonnement généré ne fonctionne pas, je dois recharger la page pour qu'il fonctionne.

Les deux scripts fonctionnent parfaitement, je voudrais combiner leur action dans la même page sans recharger.

J'ai essayé de mettre le script de désabonnement en fichier js externe , faire un script unique avec tous mais rien à faire le bouton reste inopérant sauf si je recharge.

l'abonnement se fais en ajax par clic avec ce script

$(document).ready(function(){

  // nouvel abonnement ou demande

      $("#newabo").click(function() {

      var username = $(this).data("username");

              $.ajax({
                url: '/instatux/abonnement/add/'+ username +'',
    success: function(data){

      if(data == 'demandeok'){

     $('#etatnotif').fadeIn().html('<p class="text-success"><span class="glyphicon glyphicon-ok green" style="vertical-align:center"></span>&nbsp;&nbsp;Demande d\'abonnement envoyé à ' + username +'.</span></p>');
        setTimeout(function() {
          $('#etatnotif').fadeOut("slow");
        }, 2000 );

         document.getElementById('btnabo').innerHTML = '<a href="" title="Demande envoyé à ' + username +'"  id="deleteabo" class="btn btn-warning" >Demande envoyé à  ' + username +'</a>'; // bouton signifiant l'envoi d'une demande
    }

            else if(data == 'abook'){

     $('#etatnotif').fadeIn().html('<p class="text-success"><span class="glyphicon glyphicon-ok green" style="vertical-align:center"></span>&nbsp;' + username +' fais désormais parti de vos abonnés.</span></p>');
        setTimeout(function() {
          $('#etatnotif').fadeOut("slow");
        }, 2000 );

        document.getElementById('btnabo').innerHTML = '<button data-toggle="modal" data-target="#modalmessage" class="btn btn-primary navbar-btn" title="Envoyer un message à ' + username + '" type="button"><span class="glyphicon glyphicon-envelope"></span></button> - <a href="#" data-username="' + username +'" title="Ne plus suivre ' + username +'"  id="deleteabo" class="btn btn-danger" onclick="return false;"><span class="glyphicon glyphicon-minus"></span></a>'  ; // mise à jour  : ajout du bouton delete abo et envoi message

       
    }
        else if(data == 'problème'){

     $('#etatnotif').fadeIn().html('<p class="text-danger"><span class="glyphicon glyphicon-remove red" style="vertical-align:center"></span>&nbsp;Problème lors du traitement de votre demande.</span></p>');
        setTimeout(function() {
          $('#etatnotif').fadeOut("slow");
        }, 2000 );
    }


  },
    error: function(data)
    {
        $('#etatnotif').prepend('<p class="text-danger"><span class="glyphicon glyphicon-remove red" style="vertical-align:center"></span>&nbsp;Problème.</span></p>');    
    }
                
         });
});

    });  

Le script de désabonnement

$(document).ready(function(){

  // marquer les notifications comme lues

      $("#deleteabo").click(function() {

      var username = $(this).data("username");

              $.ajax({
                url: '/instatux/abonnement/delete/'+ username +'',
    success: function(data){

      if(data == 'suppok'){

     $('#etatnotif').fadeIn().html('<p class="text-success"><span class="glyphicon glyphicon-ok green" style="vertical-align:center"></span>&nbsp;&nbsp;Abonnement supprimé</span></p>');
        setTimeout(function() {
          $('#etatnotif').fadeOut("slow");
        }, 2000 );

         document.getElementById('btndesabomesg').innerHTML = '<a href="#" data-username="' + username +'" title="Suivre ' + username +'"  id="newabo" class="btn btn-success" onclick="return false;"><span class="glyphicon glyphicon-plus"></span></a>'; // mise à jour bouton abo


    }


        else if(data == 'problème'){

     $('#etatnotif').fadeIn().html('<p class="text-danger"><span class="glyphicon glyphicon-remove red" style="vertical-align:center"></span>&nbsp;Problème lors du traitement de votre demande.</span></p>');
        setTimeout(function() {
          $('#etatnotif').fadeOut("slow");
        }, 2000 );
    }


  },
    error: function(data)
    {
        $('#etatnotif').prepend('<p class="text-danger"><span class="glyphicon glyphicon-remove red" style="vertical-align:center"></span>&nbsp;Problème.</span></p>');    
    }
                
         });
});

    });  

 Merci pour votre aide

Quant tu page est initialisé, il va commencer a écouter les événement sur buttons qui existe.
Or dans ton cas, un seul des 2 buttons existe existe au départ.

Plusieurs solution :

• Créer les 2 buttons des le début et jouer avec le css
• Ajouter une écoute sur le bouton a la création.
• Utilise la méthode on(...) de jquery

Bonjour GannoN et merci pour la réponse

Je suis finalement parvenu à faire ce que je souhaitais mais je ne suis pas sur que ce soit optimal , j'aimerais ton avis

-> après l’ajout d'un abonnement, je charge grâce à la méthode getScript() le script qui gère la suppression de l'abonnement, à la fin du success de ajax

je ne sais pas si c'est une bonne option, je préfère prendre les bonnes habitudes de suite, merci