Come associare gli eventi ai contenuti caricati da Ajax?

Ho un collegamento, myLinkche dovrebbe inserire il contenuto caricato AJAX in un div(appendedContainer) della mia pagina HTML. Il problema è che l' clickevento che ho associato con jQuery non viene eseguito sul contenuto appena caricato che viene inserito in appendedContainer. L' clickevento è associato agli elementi DOM che non vengono caricati con la mia funzione AJAX.

Cosa devo cambiare, in modo che l'evento sia vincolato?

Il mio HTML:

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

Il mio 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!");});

Il contenuto da caricare:

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

Usa la delega degli eventi per gli elementi creati dinamicamente:

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

Questo funziona davvero, ecco un esempio in cui ho aggiunto un'ancora con la classe .mylinkinvece di data- http://jsfiddle.net/EFjzG/

Se il contenuto viene aggiunto dopo la chiamata .on (), sarà necessario creare un evento delegato su un elemento padre del contenuto caricato. Questo perché i gestori di eventi vengono associati quando viene chiamato .on () (cioè di solito al caricamento della pagina). Se l'elemento non esiste quando viene chiamato .on (), l'evento non sarà vincolato ad esso!

Poiché gli eventi si propagano attraverso il DOM, possiamo risolvere questo problema creando un evento delegato su un elemento genitore ( .parent-elementnell'esempio sotto) che sappiamo esiste quando la pagina viene caricata. Ecco come:

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

Ancora qualche lettura sull'argomento:

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

se la tua domanda è "come associare eventi su contenuto caricato ajax" puoi fare in questo modo:

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

quindi non è necessario posizionare la configurazione su ogni codice ajax

A partire da jQuery 1.7, il .live()metodo è deprecato. Utilizzare .on()per allegare gestori di eventi.

Esempio -

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

Per coloro che sono ancora alla ricerca di una soluzione, il modo migliore per farlo è legare l'evento al documento stesso e non legare con l'evento "pronto" Ad esempio:

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

});

Se la tua risposta ajax contiene input di moduli html, ad esempio, sarebbe fantastico:

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

});

usa jQuery.live () invece. Documentazione qui

per esempio

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

Per ASP.NET prova questo:

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

Sembra funzionare al caricamento della pagina e al caricamento del pannello di aggiornamento

Si prega di trovare la discussione completa qui .