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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : JQuery> Lancer un script sur un élément créé par JQuery

Furaxx

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 :

// Ajout d'un champ Préparation
$(".ajoutPreparation" ).click(function() {
$("#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>" );
});

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

Code :

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

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!

Publicité

MaybeEijOrNot

but someone at least

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 :

<!DOCTYPE html>
<html>
<head>
<title>Page d'essai</title>
<style type="text/css">
</style>
<script type="text/javascript">
function del(el) {
el.parentNode.removeChild(el);
}
function add() {
par = document.getElementById('test');
content = document.createTextNode('cliquez-moi pour me détruire');
div = document.createElement('div');
div.setAttribute("onClick", "del(this);" );
div.appendChild(content);
par.appendChild(div);
}
</script>
</head>
<body onLoad="add();">
<div id="test">
<div>reste en vie</div>
</div>
</body>
</html>

Furaxx

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 :

$('body').on("click", '.supprPreparation', function() {
if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
$(this).parent().hide('slow', '', function() {
$(this).remove();
});
}
});

Message cité 1 fois

MaybeEijOrNot

but someone at least

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

LeRiton

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

Code :

$(document).on('ready', function() {
...
});

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 :

$(document).on('ready', function() {
 
    var deleteFunc = function() {
        if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
            $(this).parent().hide('slow', '', function() {
            $(this).remove();
        });
    }
 
    $('.ajoutPreparation').on('click', function() {
        var node // Tu créé ton nœud qui aura la classe de suppression.
        node.on('click', deleteFunc);
    });
 
    $('.supprPreparation').on('click', deleteFunc);
});

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

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

Furaxx

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

MaybeEijOrNot

but someone at least

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.

skylight

Made in France.

Furaxx a écrit :

Code :

$('body').on("click", '.supprPreparation', function() {
if(confirm('Etes-vous certain de vouloir supprimer cette étape ?')) {
$(this).parent().hide('slow', '', function() {
$(this).remove();
});
}
});

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

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 simple	probleme de lancement du script
[BATCH] lancer une page web sur un serveur 2008	Script titrage radio
Créer un exécutable à partir d'un script Perl	script 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 windows	Script affichage taille fichier
Plus de sujets relatifs à : JQuery> Lancer un script sur un élément créé par JQuery

Page générée en 0.070 secondes