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

J'ai un lien myLink,, qui devrait insérer du contenu chargé AJAX dans un div(appendedContainer) de ma page HTML. Le problème est que l' clickévénement que j'ai lié avec jQuery n'est pas exécuté sur le contenu nouvellement chargé qui est inséré dans le appendedContainer. L' clickévénement est lié aux éléments 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>

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 .mylinkau lieu de data- http://jsfiddle.net/EFjzG/

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é. C'est parce que 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é!

Étant donné que les événements se propagent via le DOM, nous pouvons résoudre ce problème en créant un événement délégué sur un élément parent ( .parent-elementdans l'exemple ci-dessous) dont nous savons qu'il existe lorsque la page se charge. 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

si votre question est "comment lier des événements sur du contenu chargé 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');
});

vous n'avez donc pas besoin de placer votre configuration sur chaque code ajax

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

Exemple -

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

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 lier avec l'événement "prêt à l'emploi". 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
        }
    });
});

});

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

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

});

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 au chargement de la page et au chargement du panneau de mise à jour

Veuillez trouver la discussion complète ici .