Comment lier des événements sur le contenu chargé d'Ajax?

J'ai un lien, myLink , qui devrait insérer le contenu chargé d'AJAX dans un div (appendedContainer) de ma page HTML. Le problème est que l'événement de click j'ai lié avec jQuery n'est pas exécuté sur le contenu nouvellement chargé qui est inséré dans l'appendedContainer. L'événement de click est lié aux éléments DOM qui ne sont pas chargés avec ma fonction AJAX.

Que dois-je changer, de sorte que l'événement sera lié?

Mon HTML:

 <a class="LoadFromAjax" href="someurl">Load Ajax</a> <div class="appendedContainer"></div>

Mon JavaScript:

 $(".LoadFromAjax").on("click", function(event) { event.preventDefault(); var url = $(this).attr("href"), appendedContainer = $(".appendedContainer"); $.ajax({ url: url, type : 'get', complete : function( qXHR, textStatus ) { if (textStatus === 'success') { var data = qXHR.responseText appendedContainer.hide(); appendedContainer.append(data); appendedContainer.fadeIn(); } } }); }); $(".mylink").on("click", function(event) { alert("new link clicked!");});

Le contenu à charger:

 <div>some content</div> <a class="mylink" href="otherurl">Link</a>

Utilisez la délégation d'événements pour les éléments dynamiquement créés:

 $(document).on("click", '.mylink', function(event) { alert("new link clicked!"); });

Cela fonctionne réellement, voici un exemple où j'ai ajouté une ancre avec la classe .mylink au lieu de data – http://jsfiddle.net/EFjzG/

Si le contenu est ajouté après .on () est appelé, vous devrez créer un événement délégué sur un élément parent du contenu chargé. C'est parce que les gestionnaires d'événements sont liés quand .on () est appelé (c'est-à-dire habituellement sur le chargement de la page). Si l'élément n'existe pas lorsque .on () est appelé, l'événement ne sera pas lié à celui-ci!

Parce que les événements se propagent à travers les DOM, nous pouvons résoudre ceci en créant un événement délégué sur un élément parent (élément .parent-element dans l'exemple ci-dessous) que nous connaissons existe lorsque la page est chargée. Voici comment:

 $('.parent-element').on('click', '.mylink', function(){ alert ("new link clicked!"); })

Encore plus de lectures sur le sujet:

Si votre question est "comment lier des événements sur le contenu chargé ajax", vous pouvez faire ceci:

 $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); // lazy load to DOMNodeInserted event $(document).bind('DOMNodeInserted', function(e) { $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); });

Donc vous n'avez pas besoin de placer votre configuration à tous vos codes ajax

Utilisez plutôt jQuery.live (). Documentation ici

par exemple

 $("mylink").live("click", function(event) { alert("new link clicked!");});

Pour ASP.NET, essayez ceci:

 <script type="text/javascript"> Sys.Application.add_load(function() { ... }); </script>

Cela semble fonctionner sur le chargement de la page et sur la charge du panneau de mise à jour

Veuillez trouver la discussion complète ici .

À partir de jQuery 1.7, la méthode .live() est obsolète. Utilisez .on() pour attacher les gestionnaires d'événements.

Exemple –

 $( document ).on( events, selector, data, handler );

Pour ceux qui cherchent encore une solution, la meilleure façon de le faire est de lier l'événement sur le document lui-même et de ne pas se lier à l'événement "on ready" Par exemple:

 $(function ajaxform_reload() { $(document).on("submit", ".ajax_forms", function (e) { e.preventDefault(); var url = $(this).attr('action'); $.ajax({ type: 'post', url: url, data: $(this).serialize(), success: function (data) { // DO WHAT YOU WANT WITH THE RESPONSE } }); });

});