Fonction jquery dans une autre fonction jquery

[vince78]

Bonjour à tous,

voilà mon problème, je souhaite faire appel à une fonction ($(".action_suppression_type_libre")) lors d'un clic sur un div (class="action_suppression_type_libre") d'une autre fonction jquery. ($(".suppressionchamps")). Cela ne fonctionne pas, je ne sais pas comment m'y prendre, j'ai essayé de nombreuses méthodes mais rien y fait, je n'arrive pas à trouver comment faire.

(en gros, je veux exécuter du jquery au clic sur un élément qui a lui même été créé via du jquery.

<script>

$(function() {


$(".suppressionchamps").click(function(){


$('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');


return false;

});



$(".action_suppression_type_libre").click(function(){

alert('test');


return false;

});

});

</script>


<div id="valeur1">

<span class="suppressionchamps">cliquer ici</span>

</div>

Merci d'avance pour votre précieuse aide !

Vincent

[SStephane]

Tout d'abord, $(".action_suppression_type_libre") & $(".suppressionchamps") ne sont pas des fonctions mais des sélecteurs. Ils retournent un/des pseudo(s) objet(s) jquery enrichis par rapport à ceux de JS.

Lorsque tu poses un écouteur sur ".action_suppression_type_libre" (sur l'événement clic), cet objet n'est tout simplement pas dans le DOM, donc en gros, le selecteur $(".action_suppression_type_libre") est vide. En gros ce code ne sert à rien :

$(".action_suppression_type_libre").click(function(){

alert('test');


return false;

});

});

Une façon plus correcte serait :

$(document).ready(function(){

	$(".suppressionchamps").on('click', function(){

		$('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');

		// là il existe

		$(".action_suppression_type_libre").on('click',function(){

			alert('test');

			return false;

		});

	});

});

Je ne saurais que trop te recommander de te familiariser avec DOM et JS nâtif avant de te lancer dans jQuery.

[captain_torche]

Tu peux aussi utiliser la fonction delegate() pour activer une action sur un élément qui n'existe pas encore dans le DOM.

[vince78]

Merci pour vos réponses.

Voici le code fonctionnel que j'ai utilisé :

$(function() {

    $(".suppressionchamps").click(function(event){

        $('#valeur1').html('<div class="action_suppression_type_libre">OUI</div>');

        $(".action_suppression_type_libre").click(function(event){

            alert('test');

            return false;

        });        

        return false;

    });

});

Merci encore pour vos réponses. A bientôt.