Jak powiązać zdarzenia na załadowanej zawartości Ajax?
Mam link, myLink, który powinien wstawić zawartość załadowaną Ajaxem do div (appendedContainer) mojej strony HTML. Problem polega na tym, że zdarzenie click, które powiązałem z jQuery, nie jest wykonywane na nowo załadowanej zawartości, która jest wstawiana do programu appendedContainer. Zdarzenie click jest związane z elementami DOM, które nie są ładowane z moją funkcją AJAX.
Co muszę zmienić, aby wydarzenie było związane?
Mój HTML:
<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>
My 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!");});
Zawartość do załadowania:
<div>some content</div>
<a class="mylink" href="otherurl">Link</a>
8 answers
Użyj delegacji zdarzeń dla dynamicznie tworzonych elementów:
$(document).on("click", '.mylink', function(event) {
alert("new link clicked!");
});
To naprawdę działa, oto przykład, w którym dodałem anchor z klasą .mylink zamiast data - http://jsfiddle.net/EFjzG/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-16 22:18:31
Jeśli zawartość jest dołączana po .wywołana jest funkcja on (), musisz utworzyć delegowane Zdarzenie na elemencie nadrzędnym załadowanej zawartości. Dzieje się tak, ponieważ procedury obsługi zdarzeń są powiązane, gdy .wywołana jest funkcja on () (tzn. zwykle podczas ładowania strony). Jeśli element nie istnieje, kiedy .on () jest wywoływany, wydarzenie nie będzie z nim związane!
Ponieważ zdarzenia propagują się poprzez DOM, możemy to rozwiązać, tworząc delegowane Zdarzenie na elemencie nadrzędnym (.parent-element w poniższym przykładzie), o którym wiemy, że istnieje, gdy ładowanie strony. Oto jak:
$('.parent-element').on('click', '.mylink', function(){
alert ("new link clicked!");
})
Jeszcze trochę czytania na ten temat:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-06 01:28:39
Jeśli twoje pytanie brzmi "jak powiązać zdarzenia na załadowanej zawartości ajax", możesz zrobić tak:
$("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');
});
Więc nie musisz umieszczać konfiguracji do każdego kodu ajax
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-05 20:04:06
W jQuery 1.7 metoda .live() jest przestarzała. Użyj .on(), aby dołączyć procedury obsługi zdarzeń.
Przykład-
$( document ).on( events, selector, data, handler );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-03 13:00:34
Użyj jQuery.live (). Dokumentacja Tutaj
E. g
$("mylink").live("click", function(event) { alert("new link clicked!");});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-16 22:05:55
Dla ASP.NET spróbuj tego:
<script type="text/javascript">
Sys.Application.add_load(function() { ... });
</script>
Wygląda na to, że działa to przy ładowaniu strony i przy ładowaniu panelu aktualizacji
Pełna dyskusja znajduje się tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-17 20:46:52
Dla tych , którzy nadal szukają rozwiązania, najlepszym sposobem jest powiązanie zdarzenia na samym dokumencie, a nie powiązanie ze zdarzeniem " on ready" Dla np.:
$(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
}
});
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-10 12:10:01
Jeśli Twoja odpowiedź ajax zawiera na przykład dane formularzy html, to byłoby świetnie:
$(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);
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-25 13:35:58