Ich habe einen Link, der myLink
AJAX-geladenen Inhalt in einen div
(appendedContainer) 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 angehängten Container eingefügt wird. Das click
Ereignis 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>
javascript
jquery
html
ajax
jquery-events
konfile
quelle
quelle
.
für die Klassenauswahl.Antworten:
Verwenden Sie die Ereignisdelegierung für dynamisch erstellte Elemente:
Dies funktioniert tatsächlich. Hier ist ein Beispiel, in dem ich einen Anker an die Klasse angehängt habe,
.mylink
anstattdata
- http://jsfiddle.net/EFjzG/quelle
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-element
im folgenden Beispiel) erstellen , von dem wir wissen, dass es beim Laden der Seite vorhanden ist. Hier ist wie:Noch etwas zu diesem Thema lesen:
quelle
on
weniger anfällig für unbeabsichtigte Übereinstimmungen.Wenn Ihre Frage lautet: "Wie werden Ereignisse an von Ajax geladenen Inhalten gebunden?", können Sie Folgendes tun:
Sie müssen Ihre Konfiguration also nicht bei jedem Ajax-Code platzieren
quelle
Ab jQuery 1.7 ist die
.live()
Methode veraltet. Verwenden Sie.on()
zum Event - Handler anhängen.Beispiel -
quelle
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:
});
quelle
Wenn Ihre Ajax-Antwort beispielsweise HTML-Formulareingaben enthält, wäre dies großartig:
quelle
Verwenden Sie stattdessen jQuery.live (). Dokumentation hier
z.B
quelle
.live()
ist in der neuesten jquery-Version veraltet und entfernt.Versuchen Sie für ASP.NET Folgendes:
Dies scheint beim Laden der Seite und beim Laden des Update-Panels zu funktionieren
Die vollständige Diskussion finden Sie hier .
quelle