jQuery : comment interagir avec le contenu chargé par ajax ?

Question

Je réussis à charger du contenu grâce à l'utilisation de

jQuery(".menu li a").click( function(event){

    jQuery("#loadingArea").load(this.href)

});

Après le chargement du contenu, j'ai de nouveaux éléments dans ma page. J'ai essayé d'appliquer la manipulation jQuery (faire quelque chose quand je clique ou survole la souris), et l'élément ne répond pas.

Veuillez m'expliquer pourquoi je suis incapable de déclencher des événements dans un contenu qui a été chargé par ajax ?

La méthode .load() a-t-elle quelque chose à voir avec cela (c'est-à-dire que si j'avais utilisé $.ajax, je serais en mesure d'interagir avec ce contenu) ?

Merci,

Answer 1

jQuery(".menu li a").click( function(event){

    jQuery("#loadingArea").load(this.href);

});

jQuery("#loadingArea a").live('click', function() {

    /* Insert eMagic! */

});

Answer 2

Vous devrez utiliser .live() o .delegate()

pour que le contenu chargé par ajax soit également délégué

Answer 3

.live() est maintenant supprimé

C'est comme ça qu'il faut faire maintenant :

$(document).on("click",".menu li a",function(e){

});

Answer 4

.live() est la réponse à votre problème :

http://api.jquery.com/live/

Dans la documentation :

La méthode .live() est capable d'affecter des éléments qui n'ont pas encore été ajoutés au DOM. ajoutés au DOM grâce à la délégation d'événements : un gestionnaire lié à un élément à un élément ancêtre est responsable des événements qui sont déclenchés sur ses descendants. ses descendants. Le gestionnaire transmis à .live() n'est jamais lié à un élément mais à la place, .live() lie un gestionnaire spécial à la racine de l'arbre du arbre DOM.

Answer 5

Vous devez utiliser des gestionnaires d'événements en direct pour le contenu chargé par ajax

$("a").live("click",function(){
// your code
});

live lie les événements aux éléments futurs ainsi qu'aux éléments existants.