Jak powiązać zdarzenia w treści ładowanej przez Ajax?

Mam łącze, myLinkktóre powinno wstawić zawartość załadowaną AJAX do div(appendedContainer) mojej strony HTML. Problem polega na tym, że clickzdarzenie, które powiązałem z jQuery, nie jest wykonywane na nowo załadowanej treści, która jest wstawiana do elementu appendedContainer. clickWydarzenie jest zobowiązany na elementach DOM, które nie są ładowane z mojej funkcji AJAX.

Co mam zmienić, żeby impreza była związana?

Mój HTML:

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

Mój 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!");});

Treść do załadowania:

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

Użyj delegowania zdarzeń dla dynamicznie tworzonych elementów:

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

To faktycznie działa, oto przykład, w którym dołączyłem kotwicę z klasą .mylinkzamiast data- http://jsfiddle.net/EFjzG/

Jeśli zawartość jest dołączana po wywołaniu .on (), musisz utworzyć zdarzenie delegowane na elemencie nadrzędnym załadowanej treści. Dzieje się tak, ponieważ programy obsługi zdarzeń są powiązane, gdy wywoływana jest .on () (tj. Zwykle podczas ładowania strony). Jeśli element nie istnieje w momencie wywołania .on (), zdarzenie nie zostanie z nim powiązane!

Ponieważ zdarzenia rozprzestrzeniają się w DOM, możemy rozwiązać ten problem, tworząc zdarzenie delegowane w elemencie nadrzędnym ( .parent-elementw 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!");
})

Więcej informacji na ten temat:

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

jeśli twoje pytanie brzmi „jak wiązać zdarzenia w treści załadowanej przez AJAX”, możesz zrobić to w ten sposób:

$("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ć swojej konfiguracji w każdym kodzie Ajax

Od wersji jQuery 1.7 .live()metoda jest przestarzała. Służy .on()do dołączania programów obsługi zdarzeń.

Przykład -

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

Dla tych, którzy wciąż szukają rozwiązania, najlepszym sposobem na zrobienie tego jest związanie wydarzenia na samym dokumencie, a nie wiązanie z wydarzeniem „na gotowo” 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
        }
    });
});

});

Jeśli twoja odpowiedź Ajax zawiera na przykład dane wejściowe formularza HTML, byłoby to świetne:

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

});

zamiast tego użyj jQuery.live (). Dokumentacja tutaj

na przykład

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

W przypadku ASP.NET spróbuj tego:

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

Wygląda na to, że działa przy ładowaniu strony i ładowaniu panelu aktualizacji

Pełną dyskusję znajdziesz tutaj .