Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1501 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2239818
Furaxx
Posté le 08-10-2014 à 11:57:08  profilanswer
 

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! :)

mood
Publicité
Posté le 08-10-2014 à 11:57:08  profilanswer
 

n°2239823
MaybeEijOr​Not
but someone at least
Posté le 08-10-2014 à 14:17:08  profilanswer
 

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>

n°2239842
Furaxx
Posté le 08-10-2014 à 17:37:53  profilanswer
 

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. });

n°2239873
MaybeEijOr​Not
but someone at least
Posté le 09-10-2014 à 09:27:32  profilanswer
 

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à.

n°2239884
LeRiton
skishop-lelex.com
Posté le 09-10-2014 à 12:57:46  profilanswer
 

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

---------------
SkiShop Lélex, location de ski, snowboard, snowscoot & VTT sur le domaine Mijoux / Lélex (Jura)
n°2239979
Furaxx
Posté le 10-10-2014 à 14:05:14  profilanswer
 

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é ;)).

n°2240028
MaybeEijOr​Not
but someone at least
Posté le 10-10-2014 à 21:48:22  profilanswer
 

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.

n°2240078
skylight
Made in France.
Posté le 12-10-2014 à 01:49:37  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 

Sujets relatifs
[Trouvé] Recherche script Web FTP simpleprobleme de lancement du script
[BATCH] lancer une page web sur un serveur 2008Script titrage radio
Créer un exécutable à partir d'un script Perlscript src="//cdn.com/lib.js" ou src="http://cdn.com/lib.js" ?
[Résolu] Probleme execution de script php avec cron(module/script) Espace Secur + messagerie interne
Création d'un script ou btach de copie de fichier sous windowsScript affichage taille fichier
Plus de sujets relatifs à : JQuery> Lancer un script sur un élément créé par JQuery


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR