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

Essayez ce qui suit:

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

De la $.on() de la documentation:

Les gestionnaires d'événements

ne sont liés qu'aux éléments actuellement sélectionnés; ils doit exister sur la page au moment où votre code fait l'appel à .on() .

votre élément #child n'existe pas lorsque vous appelez $.on() sur lui, donc l'événement n'est pas lié (contrairement à $.live() ). #parent , cependant, ne existent, de sorte liant l'événement à ce est très bien.

le deuxième argument de mon code ci-dessus agit comme un" filtre "pour déclencher seulement si l'événement a bubblé jusqu'à #parent 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... mot. Avec cet exemple, vous placez un auditeur sur le document entier.

quand vous click sur n'importe quel élément correspondant à #selector , l'événement bulles jusqu'au document principal -- aussi longtemps qu'il n'y a pas d'autres auditeurs qui appellent la méthode event.stopPropagation() -- qui serait le dessus du bouillonnement 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 êtes à l'écoute de tout événement 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 que tous les éléments ajoutés dynamiquement.

c'est intelligent pour quelques raisons, y compris la performance et l'utilisation de la mémoire (dans les applications à grande échelle)

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

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

fondamentalement, regarder le document pour les événements de clic et les filtrer pour #enfant.

je sais qu'il est un peu tard pour une réponse, mais j'ai créé un polyfill pour le .live() la méthode. Je l'ai testé dans jQuery 1.11, et il semble fonctionner assez bien. Je sais que nous sommes censés mettre en œuvre l' .on () méthode dans la mesure du possible, mais dans les grands projets, où il n'est pas possible de tout convertir .live() appelle à l'équivalent .sur() appelle pour quelque raison que ce soit, les éléments suivants pourraient travailler:

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 vivre.)(

.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;
});

j'ai utilisé "vivre" dans mon projet, mais un de mes ami a suggéré que je devrais utiliser " on " au lieu de vivre. Et quand j'ai essayé d'utiliser ça, j'ai eu un problème comme toi.

sur mes pages, je crée dynamiquement des lignes de table de boutons et beaucoup de choses dom. mais quand j'utilise la magie a disparu.

Les autres solutions comme l'utiliser comme un enfant appelle simplement vos fonctions à chaque fois sur chaque clic. Mais je trouve un moyen de faire que cela se reproduise et voici solution.

écrivez votre code comme:

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

Caller(); après avoir créé votre objet dans la page comme ceci.

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

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