Méthode jQuery .live () vs .on () pour ajouter un événement click après le chargement du fichier html dynamique

Question

Je suis à l'aide de jQuery v. 1.7.De 1 où la .live() la méthode est apparemment obsolète.

Le problème que j'ai est que lorsque le chargement dynamique de code html sur un élément à l'aide de:

$('#parent').load("http://..."); 

Si j'essaie d'ajouter un événement click ensuite, il ne doit pas s'inscrire à l'événement en utilisant une de ces méthodes:

$('#parent').click(function() ...); 

ou

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

Quelle est la bonne façon d'obtenir cette fonctionnalité? Il semble que pour travailler avec .live() pour moi, mais je ne devrais pas être à l'aide de cette méthode. Notez que #enfant est chargé dynamiquement élément.

Merci.

Answer 1

Si vous voulez que le gestionnaire de clic de travailler pour un élément qui est chargé dynamiquement, vous pouvez alors définir le gestionnaire d'événement sur un objet parent (ce qui ne veut pas se charger dynamiquement) et lui donner un sélecteur qui correspond à votre dynamique de l'objet comme ceci:

$('#parent').on("click", "#child", function() {});

Le gestionnaire d'événement sera jointe à l' #parent objet et chaque fois qu'un événement de clic les bulles jusqu'à ce que provenait d' #child, il va mettre le feu à votre gestionnaire de clic. Ceci est appelé délégué la gestion des événements (la gestion des événements est déléguée à un objet parent).

Il est fait de cette façon parce que vous pouvez joindre à l'événement pour l' #parent objet même lorsque l' #child objet n'existe pas encore, mais plus tard, quand il existe, et obtient cliqué sur, l'événement click de la bulle jusqu'à l' #parent objet, il va voir qu'il est apparu sur #child et il y a un gestionnaire d'événement pour un clic sur #child et le feu de votre événement.

Answer 2

Essayez ceci:

$('#parent').on('click', '#child', function() {
    // Code
});

De la $.on() documentation:

Les gestionnaires d'événements sont liés uniquement pour les éléments sélectionnés; ils doit exister sur la page au moment de votre code fait l'appel .on().

Votre #child élément n'existe pas lorsque vous appelez $.on() sur, de sorte que l'événement n'est pas lié (contrairement à $.live()). #parent, cependant, n' existe pas, de sorte que la liaison de l'événement, c'est très bien.

Le deuxième argument dans mon code ci-dessus, agit comme un "filtre" pour les ne se déclenchera que si l'événement bouillonnait à l' #parent de #child.

Answer 3

$(document).on('click', '#selector', function() { /* do stuff */ });

Answer 4

L'équivalent de .live () dans 1.7 ressemble à ceci:

 $(document).on('click', '#child', function() ...); 
 

Fondamentalement, regardez le document pour les événements de clic et filtrez-les pour #child.

Answer 5

.on () est pour jQuery version 1.7 et supérieure. Si vous avez une version plus ancienne, utilisez ceci:

 $("#SomeId").live("click",function(){
    //do stuff;
});