Wie binde ich Ereignisse an von Ajax geladene Inhalte?

Ich habe einen Link, der myLinkAJAX-geladenen Inhalt in einen div(appendedContainer) meiner HTML-Seite einfügen soll . Das Problem ist, dass das clickEreignis , das ich mit jQuery gebunden habe, nicht für den neu geladenen Inhalt ausgeführt wird, der in den angehängten Container eingefügt wird. Das clickEreignis ist an DOM-Elemente gebunden, die nicht mit meiner AJAX-Funktion geladen sind.

Was muss ich ändern, damit das Ereignis gebunden wird?

Mein HTML:

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

Mein 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!");});

Der zu ladende Inhalt:

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

Verwenden Sie die Ereignisdelegierung für dynamisch erstellte Elemente:

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

Dies funktioniert tatsächlich. Hier ist ein Beispiel, in dem ich einen Anker an die Klasse angehängt habe, .mylinkanstatt data- http://jsfiddle.net/EFjzG/

Wenn der Inhalt nach dem Aufruf von .on () angehängt wird, müssen Sie ein delegiertes Ereignis für ein übergeordnetes Element des geladenen Inhalts erstellen. Dies liegt daran, dass Ereignishandler gebunden sind, wenn .on () aufgerufen wird (dh normalerweise beim Laden der Seite). Wenn das Element beim Aufruf von .on () nicht vorhanden ist, ist das Ereignis nicht daran gebunden!

Da sich Ereignisse über das DOM ausbreiten, können wir dieses Problem lösen, indem wir ein delegiertes Ereignis für ein übergeordnetes Element ( .parent-elementim folgenden Beispiel) erstellen , von dem wir wissen, dass es beim Laden der Seite vorhanden ist. Hier ist wie:

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

Noch etwas zu diesem Thema lesen:

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

Wenn Ihre Frage lautet: "Wie werden Ereignisse an von Ajax geladenen Inhalten gebunden?", können Sie Folgendes tun:

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

Sie müssen Ihre Konfiguration also nicht bei jedem Ajax-Code platzieren

Ab jQuery 1.7 ist die .live()Methode veraltet. Verwenden Sie .on()zum Event - Handler anhängen.

Beispiel -

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

Für diejenigen, die noch nach einer Lösung suchen, besteht die beste Möglichkeit darin, das Ereignis an das Dokument selbst zu binden und nicht an das Ereignis "on ready" zu binden. Zum Beispiel:

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

});

Wenn Ihre Ajax-Antwort beispielsweise HTML-Formulareingaben enthält, wäre dies großartig:

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

});

Verwenden Sie stattdessen jQuery.live (). Dokumentation hier

z.B

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

Versuchen Sie für ASP.NET Folgendes:

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

Dies scheint beim Laden der Seite und beim Laden des Update-Panels zu funktionieren

Die vollständige Diskussion finden Sie hier .