Gestion d'un événement avec jQuery

Bonjour,

J'ai créé un lien (#cmd-pseudo-popup) permettant la fermeture d'une fenêtre (#pseudo-popup) via jQuery.

Le code js :

$('#cmd-pseudo-popup').click(function(event) {
    event.preventDefault();
	$('#pseudo-popup').remove();
});

Le code html :

<section id="pseudo-popup">
   <!-- du code... -->
    <a href="#" id="cmd-pseudo-popup"></a>
</section>

Tout fonctionne parfaitement si le lien se trouve déjà dans le code. Mais si j'appelle ce même code html (et son lien) via ajax (fonction .load() de jQuery) alors là rien ne va plus...

Le même problème se pose si je crée le liens en js :

//apparait mais ne fonctionne pas avec l'événement
$( '<a href="#" id="cmd-pseudo-popup"></a>' ).appendTo('#pseudo-popup');

Je me dis qu'il doit y avoir un "événement" ou un truc du genre à stoker à l'avance dans le js pour #cmd-pseudo-popup, mais je n'ai aucune idée de la manière de procéder. Si quelqu'un peut me dépanner...

Un exemple ici : scriptura.
- cliquez sur l'onglet "jQuery" pour voir apparaitre la première fenêtre déjà présente dans le code,
- cliquez sur le bouton "Pseudo-popup" pour appeler cette même fenêtre via ajax.

Vous verrez que le deuxième exemple ne fonctionne pas pour ce qui est de la fermeture de la fenêtre...
Modifié par Olivier C (04 Jan 2014 - 19:21)

Salut,

En fait tu crées un événement alors que le noeud n'existe pas

.on()
.live()

Au passage, attention à ton preventDefault(). Place le après ton remove()
Modifié par niuxe (04 Jan 2014 - 21:25)

Salut,

Attention ! la méthode live () de jQuery est obsolète (voire supprimée depuis la version 1.9) : il faut utiliser, à sa place, la méthode on () au niveau de l'objet document, comme suit :

$(document).on ('click', '#cmd-pseudo-popup', function () { /* Le code de la fonction */ });
// Au lieu de $('#cmd-pseudo-popup').live ('click', function () {});

Merci à vous deux, chaleureusement,

Les pistes que m'a donné Niuxe correspondent avec ce que j'ai pu potasser hier dans mes bouquins jQuery. Une bonne occasion de mieux comprendre le fonctionnement des événements js et de leur gestion par rapport au DOM.

Quand à toi, Victor, tu me donne la solution clef en main... et elle fonctionne parfaitement ! Je l'utilise donc. (j'avais eu vent de la dépréciation de la fonction .live()).

Bien à vous