wake-up-neo.com

Wie binden Sie Ereignisse auf Ajax-geladenen Inhalten?

Ich habe einen Link, myLink, der AJAX-geladene Inhalte in eine div (angefügterContainer) meiner HTML-Seite einfügen soll. Das Problem ist, dass das click-Ereignis, das ich mit jQuery gebunden habe, nicht für den neu geladenen Inhalt ausgeführt wird, der in den angefügten Container eingefügt wird. Das click-Ereignis ist an DOM-Elemente gebunden, die nicht mit meiner Funktion AJAX geladen werden.

Was muss ich ändern, damit die Veranstaltung gebunden ist? 

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>
javascriptjqueryhtmlajaxjquery-events
73
confile

Verwenden Sie die Ereignisdelegierung für dynamisch erstellte Elemente:

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

Das funktioniert tatsächlich, hier ein Beispiel, bei dem ich einen Anker mit der Klasse .mylink anstelle von data - http://jsfiddle.net/EFjzG/

157
lifetimes

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 Event-Handler gebunden sind, wenn .on () aufgerufen wird (d. H. Normalerweise beim Laden von Seiten). Wenn das Element nicht vorhanden ist, wenn .on () aufgerufen wird, ist das Ereignis nicht daran gebunden.

Da sich Ereignisse über das DOM verbreiten, können Sie dies lösen, indem Sie ein delegiertes Ereignis für ein übergeordnetes Element (.parent-element im Beispiel unten) 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:

16
Kai

wenn Ihre Frage "Wie binden Sie Ereignisse an ajax geladenen Inhalten", 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 für jeden Ajax-Code angeben

6
antoniputra

Seit jQuery 1.7 ist die .live()-Methode veraltet. Verwenden Sie .on(), um Ereignishandler anzuhängen.

Beispiel - 

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

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. 

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

Für ASP.NET versuchen Sie 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

Hier finden Sie die vollständige Diskussion hier . 

0
Michael

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

});
0
ChristianG

verwenden Sie stattdessen jQuery.live (). Dokumentation hier

z.B 

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