Wie binde ich Ereignisse an von Ajax geladene Inhalte?

96

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>
konfile
quelle
1
Hinweis: Folgendes funktioniert nicht. Sie fehlen .für die Klassenauswahl.
undefiniert
Das war ein Tippfehler! Es funktioniert immer noch nicht.
Confile
1
Siehe jquery .load () -Methode. $ ('# target'). load ('source.html');
km6zla
Macht load () etwas anderes?
Confile

Antworten:

217

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/

dsgriffin
quelle
Das habe ich geschrieben, was ich getan habe.
Confile
@confile Wirklich? Ich habe Ihre Frage zweimal gelesen und sehe sie weder schriftlich noch im Code?
dsgriffin
@confile .. Siehe die Antwort agian .. das ist anders als das, was Sie haben
Mohammad Adil
2
@confile Meine Antwort funktioniert !! Hier ist ein Beispiel dafür - jsfiddle.net/EFjzG
dsgriffin
1
Hallo, diese Antwort funktioniert einwandfrei. Das Ereignis wird an das gesamte Dokument angehängt, sodass im Grunde jeder Klick auf eine Seite ein Ereignis auslöst. Anschließend wird der Selektor '.mylink' angewendet, um die von uns benötigten Klickereignisse zu filtern. Hervorragende Technik.
Emir
23

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:

Kai
quelle
3
Ich bevorzuge diese Antwort gegenüber der von @lifetimes, da ich den Handler auf ein übergeordnetes Element setzen soll, das zum Zeitpunkt des Ladens vorhanden ist, und nicht unbedingt bis zum Dokument . Dies macht den Selektor im zweiten Argument onweniger anfällig für unbeabsichtigte Übereinstimmungen.
R. Schreurs
Wenn die Ajax geladene HTML-Klasse auch Eltern-Element geladen hat, dann funktioniert es nicht
Jafar Pinjar
6

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

Antoniputra
quelle
2

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

Beispiel -

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

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

});

Real-Source
quelle
1

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

});
ChristianG
quelle
0

Verwenden Sie stattdessen jQuery.live (). Dokumentation hier

z.B

$("mylink").live("click", function(event) { alert("new link clicked!");});
ROMMEL
quelle
9
.live()ist in der neuesten jquery-Version veraltet und entfernt.
Mohammad Adil
0

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 .

Michael
quelle
2
Woher kommt diese "Sys.Application"? - '
André Marcondes Teixeira
Es scheint zu ASP.NET zu gehören: msdn.microsoft.com/en-us/library/vstudio/…
Michael