Comment lier des événements au contenu chargé par Ajax ?

Question

J'ai un lien, myLink qui doit insérer du contenu téléchargé par AJAX dans une page Web de l'entreprise. div (appendedContainer) de ma page HTML. Le problème est que le click que j'ai lié avec jQuery n'est pas exécuté sur le contenu nouvellement chargé qui est inséré dans l'appendedContainer. Le site click est lié aux éléments du DOM qui ne sont pas chargés avec ma fonction AJAX.

Que dois-je changer pour que l'événement soit 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>

Answer 1

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

$(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/

Answer 2

Si le contenu est ajouté après l'appel de .on(), vous devrez créer un événement délégué sur un élément parent du contenu chargé. En effet, les gestionnaires d'événements sont liés lorsque .on() est appelé (c'est-à-dire généralement lors du chargement de la page). Si l'élément n'existe pas lorsque .on() est appelé, l'événement ne lui sera pas lié !

Comme les événements se propagent à travers le DOM, nous pouvons résoudre ce problème en créant un événement délégué sur un élément parent ( .parent-element dans l'exemple ci-dessous) que nous savons exister au moment du chargement de la page. Voici comment :

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

Quelques lectures supplémentaires sur le sujet :

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

Answer 3

Si votre question est "comment lier des événements au contenu chargé par ajax", vous pouvez faire comme 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');
});

ainsi vous n'avez pas besoin de placer votre configuration à chaque fois que vous code ajax

Answer 4

À partir de la version 1.7 de jQuery, la fonction .live() est dépréciée. Utilisez .on() pour attacher des gestionnaires d'événements.

Exemple -

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

Answer 5

Si votre réponse ajax contient des entrées de formulaire html par exemple, ce serait parfait :

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});