web-dev-qa-db-fra.com

Comment lier des événements sur du contenu chargé avec Ajax?

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

Qu'est-ce que je dois 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>
javascriptjqueryhtmlajaxjquery-events
73
confile

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/

157
lifetimes

Si le contenu est ajouté après l'appel de .on (), vous devez 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 généralement au chargement de la page). Si l'élément n'existe pas lorsque .on () est appelé, l'événement ne lui sera pas lié!

Etant donné que les événements se propagent dans 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), comme nous le savons, existe lors du chargement de la page. Voici comment:

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

Quelques lectures supplémentaires sur le sujet:

16
Kai

si votre question est "comment lier des événements sur du contenu chargé en ajax", procédez comme suit:

$("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');
});

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

6
antoniputra

Depuis jQuery 1.7, la méthode .live() est obsolète. Utilisez .on() pour attacher des gestionnaires d’événements.

Exemple - 

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

Pour ceux qui recherchent 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 le lier à l'événement "prêt". 

$(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
        }
    });
});

});

1
Real-Source

Pour ASP.NET, essayez ceci:

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

Cela semble fonctionner au chargement de la page et au chargement du panneau de mise à jour

Veuillez trouver la discussion complète ici . 

0
Michael

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

$(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);
}

});
0
ChristianG

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

par exemple 

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