jQuery .live () vs .on () méthode pour ajouter un événement de clic après le chargement de HTML dynamique

J'utilise jQuery v.1.7.1 où la méthode .live () est apparemment obsolète.

Le problème que j'ai est que lors du chargement dynamique de code HTML dans un élément à l'aide de:

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

Si j'essaie d'ajouter un événement de clic par la suite, il n'enregistre pas l'événement à l'aide de l'une des méthodes suivantes:

$('#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é? Cela ne semble fonctionner qu'avec .live () pour moi, mais je ne devrais pas utiliser cette méthode. Notez que #child est un élément chargé dynamiquement.

Merci.

Si vous voulez que le gestionnaire de clics fonctionne pour un élément qui est chargé dynamiquement, vous définissez le gestionnaire d'événements sur un objet parent (qui n'est pas chargé dynamiquement) et lui donnez un sélecteur qui correspond à votre objet dynamique comme ceci:

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

Le gestionnaire d'événements sera attaché à l' #parentobjet et chaque fois qu'un événement de clic se propage à lui #child, il déclenchera votre gestionnaire de clics. C'est ce qu'on appelle la gestion des événements déléguée (la gestion des événements est déléguée à un objet parent).

C'est fait de cette façon parce que vous pouvez attacher l'événement à l' #parentobjet même lorsque l' #childobjet n'existe pas encore, mais quand il existe plus tard et qu'il est cliqué dessus, l'événement click va bouillonner jusqu'à l' #parentobjet, il verra qu'il est originaire #childet il y a un gestionnaire d'événements pour un clic #childet déclencher votre événement.

Essaye ça:

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

De la $.on()documentation:

Les gestionnaires d'événements ne sont liés qu'aux éléments actuellement sélectionnés; ils doivent exister sur la page au moment où votre code appelle .on().

Votre #childélément n'existe pas lorsque vous l'appelez $.on(), donc l'événement n'est pas lié (contrairement $.live()). #parentCependant, ne exist, liant donc l'événement qui est très bien.

Le deuxième argument de mon code ci-dessus agit comme un «filtre» pour ne se déclencher que si l'événement s'est propagé à #parentpartir de #child.

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

EDIT: Je fournis un peu plus d'informations sur la façon dont cela fonctionne, parce que ... des mots. Avec cet exemple, vous placez un écouteur sur l'ensemble du document.

Lorsque vous correspondez clickà n'importe quel élément .selector, l'événement bouillonne jusqu'au document principal - tant qu'il n'y a pas d'autres écouteurs qui appellent la event.stopPropagation()méthode - ce qui dépasserait la propagation d'un événement aux éléments parents.

Au lieu de vous lier à un élément ou un ensemble d'éléments spécifique, vous écoutez les événements provenant d'éléments qui correspondent au sélecteur spécifié. Cela signifie que vous pouvez créer un écouteur, une fois, qui correspondra automatiquement aux éléments existants ainsi qu'à tous les éléments ajoutés dynamiquement.

C'est intelligent pour plusieurs raisons, notamment les performances et l'utilisation de la mémoire (dans les applications à grande échelle)

ÉDITER:

De toute évidence, l'élément parent le plus proche que vous pouvez écouter est meilleur, et vous pouvez utiliser n'importe quel élément à la place documenttant que les enfants pour lesquels vous souhaitez surveiller les événements se trouvent dans cet élément parent ... mais cela n'a vraiment rien à voir avec la question.

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

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

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

Je sais qu'il est un peu tard pour une réponse, mais j'ai créé un polyfill pour la méthode .live (). Je l'ai testé dans jQuery 1.11, et il semble fonctionner assez bien. Je sais que nous sommes censés implémenter la méthode .on () dans la mesure du possible, mais dans les grands projets, où il n'est pas possible de convertir tous les appels .live () en appels équivalents .on () pour une raison quelconque, ce qui suit pourrait travail:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

Il suffit de l'inclure après avoir chargé jQuery et avant d'appeler live ().

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

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

J'ai utilisé «live» dans mon projet mais un de mes amis a suggéré que je devrais utiliser «on» au lieu de live. Et quand j'ai essayé de l'utiliser, j'ai rencontré un problème comme vous.

Sur mes pages, je crée dynamiquement des lignes de tableau de boutons et de nombreux éléments dom. mais quand j'utilise sur la magie a disparu.

Les autres solutions comme l'utiliser comme un enfant appellent simplement vos fonctions à chaque fois à chaque clic. Mais je trouve un moyen d'y arriver à nouveau et voici la solution.

Écrivez votre code comme:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

Appelant appelant (); après avoir créé votre objet dans la page comme celle-ci.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

De cette façon, votre fonction est appelée alors qu'elle n'est pas censée faire chaque clic sur la page.