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

[Furax]

Je vous explique mon souci:

 

J'ai sur une page web un bouton qui permet la création de champs, chacun suivi par un bouton de suppression, au cas où on crée un champs par erreur.

 

Seul problème:

- Si ma ligne est présente à l'ouverture de la page, le bouton de suppression fonctionne.

- Si ma ligne est créée avec JQuery, alors le bouton ne fonctionne pas

 

Et donc, comment je peux avoir un bouton créé avec JQuery qui lui-même puisse réagir ensuite?

 

Merci!

[Nemasix]

Salut,

 

Ce serait mieux pour voir ce que tu fais si on a le code (ne pas oublier les balises du forum [ code ] )

 

Lors de ton insertion, tout ce petit monde à un id non? Tu ne te bases pas dessus?

[Furax]

Hum en effet ça serait plus clair avec un peu de code.

 

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é:

// 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:

// 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 le bouton "SupprPreparation", la fonction ne se lance pas et il ne se passe donc rien.

Il faudrait "réinitialiser" la fonction de suppression après la création d'un bloc pour que celui-ci soit pris en compte quoi.

 

Je me base donc sur le nom de la class pour la suppression et sur le parent de celle-ci pour supprimer le bloc qui la contient.

[Nemasix]

Je pense que ce qu'il faudrait faire, pour que ça marche à tous les coups, c'est de mettre cette partie dans une fonction : 

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

Comme ça, tu rajoute à ton bouton supprPreparation un onClick qui execute cette fonction.
 

<a href="#" onclick="supprPreparation(this)" />

Je n'ai pas tester, et j'ai fait ça de tête, donc c'est plus une idée comme ça qu'une réelle solution.

 

Autre piste que je viens de trouver sur StackOverflow (ce site est juste awesome quand tu es développeur) c'est d'utiliser un on(event, selector, function) 

 

Exemple: 

$('body').on('click', '.supprPreparation', function() {
    // Ton  code ici
});

(cf : http://stackoverflow.com/questions/19122022/jquery-dynamic-contents-click-doesnt-work )

 

Bref voici quelques pistes :)

[Furax]

Je pensais passer par une fonction appelée sinon oui mais je voulais voir si on pouvait continuer à utiliser le comportement "standard" de JQuery.

 

Merci pour ton aide, je vais partir là dessus du coup.

 

 

EDIT> Je viens de tester la méthode donnée par StackOverflow et elle fonctionne nickel, merci beaucoup!

Je connais ce site mais je n'avais pas trouvé la solution dessus, peut-être pas cherché avec les bons termes...

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

[Nemasix]

J'ai fait la recherche suivante :

 

jquery function on dynamic elements

 

https://www.google.fr/webhp?q=jquery%20function%20on%20dynamic%20elements

 

En tout cas, content d'avoir pu t'aider