JQuery> Lancer un script sur un élément créé par JQuery

JQuery> Lancer un script sur un élément créé par JQuery - Javascript/Node.js - Programmation

Marsh Posté le 08-10-2014 à 11:57:08    

Je vous expose mon souci: :)
 
Donc j'ai un bouton tout ce qu'il y a de plus classique, qui me permet de créer un bloc contenant un textarea et un bouton de suppression à côté:

Code :
  1. // Ajout d'un champ Préparation
  2. $(".ajoutPreparation" ).click(function() {
  3. $("#champsPreparation" ).append("<div class=\"space\"></div><div class=\"ligne\"><textarea name=\"preparation[]\"></textarea><a href=\"#\" class=\"supprPreparation\" title=\"Supprimer l\'étape de préparation\"></a></div>" );
  4. });


 
Ensuite, j'ai un autre code qui permet, quand on clique sur le bouton "supprPreparation" de supprimer la ligne en question:

Code :
  1. // Suppression d'une étape de préparation ou d'un ingrédient
  2. $(".supprPreparation" ).click(function() {
  3. if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
  4.  $(this).parent().hide('slow', '', function() {
  5.   $(this).remove();
  6.  });
  7. }
  8. });


 
Mon souci est que l'étape "SupprPreparation" ne fonctionne que sur les blocs présents dès le chargement de la page.
Si je crée un bloc avec "ajoutPreparation" et que je clique ensuite sur son bouton "SupprPreparation", la fonction ne se lance pas et il ne se passe donc rien.
 
Je souhaiterais donc que JQuery prenne en compte les éléments créés dynamiquement après le chargement de la page.
 
Merci! :)

Reply

Marsh Posté le 08-10-2014 à 11:57:08   

Reply

Marsh Posté le 08-10-2014 à 14:17:08    

Tu essayes de supprimer le bouton là, non?
 
Je ne suis pas adepte du JQuery mais il n'y a pas de raison que la suppression d'un élément créé dynamiquement ne se fasse pas puisque ça fonctionne très bien en JS :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Page d'essai</title>
  5.   <style type="text/css">
  6.   </style>
  7.   <script type="text/javascript">
  8.    function del(el) {
  9.      el.parentNode.removeChild(el);
  10.    }
  11.    function add() {
  12.      par = document.getElementById('test');
  13.      content = document.createTextNode('cliquez-moi pour me détruire');
  14.      div = document.createElement('div');
  15.      div.setAttribute("onClick", "del(this);" );
  16.      div.appendChild(content);
  17.      par.appendChild(div);
  18.    }
  19.   </script>
  20. </head>
  21. <body onLoad="add();">
  22.   <div id="test">
  23.    <div>reste en vie</div>
  24.   </div>
  25. </body>
  26. </html>

Reply

Marsh Posté le 08-10-2014 à 17:37:53    

En fait ce que j'utilise "analyse" le document à son chargement mais pas ensuite si des éléments sont ajoutés dynamiquement, d'où mon souci.
 
Avec une fonction ça marche oui mais j'ai trouvé autre chose avec JQuery qui fonctionne:

Code :
  1. $('body').on("click", '.supprPreparation', function() {
  2. if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
  3.  $(this).parent().hide('slow', '', function() {
  4.   $(this).remove();
  5.  });
  6. }
  7. });

Reply

Marsh Posté le 09-10-2014 à 09:27:32    

Oui là tu fais dépendre ton évènement de "body" qui de toute façon est créé dès le départ. Je pense qu'ici Jquery ajoutera l'évènement à ton bloc que quand l'utilisateur cliquera sur le "body" et donc ton élément ajouté existera déjà.

Reply

Marsh Posté le 09-10-2014 à 12:57:46    

J'imagine que les deux bouts de codes de ton premier post sont appelés dans un

Code :
  1. $(document).on('ready', function() {
  2. ...
  3. });


Si c'est bien le cas, au chargement de la page (quand le DOM est prêt), tu recherches tous les nœuds portant ta classe de suppression et tu leur bind ta fonction de suppression au click. Si tu ajoutes d'autres nœuds par la suite (ce que tu fais au clic sur un '.ajoutPreparation'), eux n'auront pas ce binding.

 

Il te faut un truc de ce genre, en reprenant ton code

Code :
  1. $(document).on('ready', function() {
  2.  
  3.    var deleteFunc = function() {
  4.        if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
  5.            $(this).parent().hide('slow', '', function() {
  6.            $(this).remove();
  7.        });
  8.    }
  9.  
  10.    $('.ajoutPreparation').on('click', function() {
  11.        var node // Tu créé ton nœud qui aura la classe de suppression.
  12.        node.on('click', deleteFunc);
  13.    });
  14.  
  15.    $('.supprPreparation').on('click', deleteFunc);
  16. });
 

J'ai rien testé, c'est pour la logique du truc.


Message édité par LeRiton le 09-10-2014 à 12:59:40
Reply

Marsh Posté le 10-10-2014 à 14:05:14    

MaybeEijOrNot> Non non, avec cette méthode ça fonctionne aussi pour les éléments qui sont créés dynamiquement pas de souci.
 
Merci pour vos proposition mais c'est celle que je donne en second fonctionne aussi et est relativement simple (enfin, une fois qu'on l'a trouvé ;)).

Reply

Marsh Posté le 10-10-2014 à 21:48:22    

Oui c'est ce que je dis, la méthode fonctionne bien car elle ajoute probablement (je ne suis pas allé voir dans les fichiers de Jquery) l'évènement que quand le client cliquera sur body et donc qu'une fois que ton élément aura été ajouté dynamiquement.

Reply

Marsh Posté le 12-10-2014 à 01:49:37    

Furaxx a écrit :

En fait ce que j'utilise "analyse" le document à son chargement mais pas ensuite si des éléments sont ajoutés dynamiquement, d'où mon souci.
 
Avec une fonction ça marche oui mais j'ai trouvé autre chose avec JQuery qui fonctionne:

Code :
  1. $('body').on("click", '.supprPreparation', function() {
  2. if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
  3.  $(this).parent().hide('slow', '', function() {
  4.   $(this).remove();
  5.  });
  6. }
  7. });



Oui, ça marche très bien, c'est ce qu'on appelle les delegated events.
Par contre, tu devrais le faire sur le parent ou conteneur, ça serait mieux. (plutôt que body)


Message édité par skylight le 12-10-2014 à 01:50:10
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed