Jak wiązać zdarzenia w załadowanej zawartości Ajax?

Question

Mam łącze, myLink, które powinno wstawić treść załadowaną przez AJAX do div (dołączonej zawartości) 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 dołączonego kontenera. Zdarzenie click jest powiązane z elementami DOM, które nie są załadowane moją funkcją AJAX.

Co muszę zmienić, aby wydarzenie było związane?

Moje HTML:

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

Moje 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ść mają być załadowane:

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

Answer 1

Wykorzystanie e vent delegację do dynamicznie tworzonych elementów:

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

ten sposób faktycznie działa, oto przykład, gdzie dołączane kotwicę z klasą .mylink zamiast data - http://jsfiddle.net/EFjzG/

Answer 2

użycie jQuery.live() zamiast. Dokumentacja here

np

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

Answer 3

dla ASP.NET spróbuj tego:

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

To wydaje się działać na stronie obciążenia i aktualizacji obciążenia panelu

Proszę znaleźć pełną dyskusję here .

Answer 4

jeśli pytanie brzmi „jak powiązać wydarzenia na ajax załadowana zawartość” można 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 trzeba umieścić swoją konfigurację, aby każde Państwo kod ajax

Answer 5

Jeśli zawartość zostanie dołączona po wywołaniu funkcji .on(), musisz utworzyć delegowane zdarzenie na elemencie nadrzędnym załadowanej treści. Dzieje się tak, ponieważ funkcje obsługi zdarzeń są wiązane, gdy wywoływana jest funkcja .on(), zwykle podczas ładowania strony. Jeśli element nie istnieje po wywołaniu funkcji .on(), zdarzenie nie będzie z nim powiązane!

Ponieważ zdarzenia rozprzestrzeniają się za pośrednictwem DOM, możemy rozwiązać ten problem, tworząc delegowane zdarzenie na elemencie nadrzędnym (.parent-element w poniższym przykładzie), o którym wiemy, że istnieje podczas ładowania strony.Oto jak:

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

Niektóre bardziej odczyt na temat:

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

Answer 6

Jak jQuery 1.7, metoda .live() jest przestarzała. Użyj .on(), aby dołączyć programy do obsługi zdarzeń.

Przykład -

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

Answer 7

Dla tych, którzy nadal szukają rozwiązania, najlepiej robić to powiązać zdarzenie na sam, a nie dokumentu powiązać ze zdarzeniem „na gotowe” Na przykład:

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

});