Bagaimana cara mengikat Acara pada Konten yang dimuat Ajax?

Saya memiliki tautan,, myLinkyang harus memasukkan konten yang dimuat AJAX ke dalam div(appendedContainer) dari laman HTML saya. Masalahnya adalah bahwa clickacara yang saya ikat dengan jQuery tidak dijalankan pada konten yang baru dimuat yang dimasukkan ke appendedContainer. The clickevent terikat pada elemen DOM yang tidak sarat dengan fungsi AJAX saya.

Apa yang harus saya ubah, sehingga acara akan terikat?

HTML saya:

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

JavaScript saya:

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

Konten yang akan dimuat:

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

Gunakan delegasi acara untuk elemen yang dibuat secara dinamis:

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

Ini benar-benar berfungsi, berikut adalah contoh di mana saya menambahkan jangkar dengan kelas .mylinkalih-alih data- http://jsfiddle.net/EFjzG/

Jika konten ditambahkan setelah .on () dipanggil, Anda harus membuat acara yang didelegasikan pada elemen induk dari konten yang dimuat. Ini karena event handler terikat ketika .on () dipanggil (yaitu biasanya saat pemuatan halaman). Jika elemen tidak ada saat .on () dipanggil, acara tidak akan terikat padanya!

Karena peristiwa menyebar melalui DOM, kita dapat menyelesaikannya dengan membuat peristiwa yang didelegasikan pada elemen induk ( .parent-elementdalam contoh di bawah) yang kita tahu ada saat halaman dimuat. Begini caranya:

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

Beberapa bacaan lagi tentang subjek:

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

jika pertanyaan Anda adalah "bagaimana mengikat acara pada konten yang dimuat ajax", Anda dapat melakukan seperti ini:

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

jadi Anda tidak perlu menempatkan konfigurasi Anda ke setiap kode ajax Anda

Mulai jQuery 1.7, .live()metode ini tidak digunakan lagi. Gunakan .on()untuk melampirkan penangan acara.

Contoh -

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

Bagi mereka yang masih mencari solusi, cara terbaik untuk melakukannya adalah dengan mengikat acara pada dokumen itu sendiri dan tidak mengikat dengan acara "siap". Misalnya:

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

});

Jika respons ajax Anda berisi input formulir html misalnya, ini akan bagus:

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

});

gunakan jQuery.live () sebagai gantinya. Dokumentasi di sini

misalnya

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

Untuk ASP.NET coba ini:

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

Tampaknya ini berfungsi pada pemuatan halaman dan pemuatan panel pembaruan

Silakan temukan pembahasan lengkapnya di sini .