Ajax tarafından yüklenen İçerikte Olaylar nasıl bağlanır?

myLinkAJAX ile yüklenmiş içeriği divHTML sayfamın (ekli Konteyner) içine eklemesi gereken bir bağlantım var . Sorun, clickjQuery ile bağladığım olayın, eklenenContainer'a eklenen yeni yüklenen içerik üzerinde yürütülmemesidir. clickOlay benim AJAX fonksiyonu ile yüklenmez DOM öğeleri üzerinde bağlıdır.

Etkinliğin bağlanması için neyi değiştirmem gerekiyor?

HTML'im:

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

JavaScript'im:

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

Yüklenecek içerik:

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

Dinamik olarak oluşturulan öğeler için olay yetkilendirmesini kullanın:

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

Bu gerçekten işe yarıyor, burada sınıfa .mylinkyerine bir çapa eklediğim bir örnek data- http://jsfiddle.net/EFjzG/

İçerik .on () çağrıldıktan sonra eklenirse, yüklenen içeriğin bir üst öğesi üzerinde temsilci bir olay oluşturmanız gerekir. Bunun nedeni, .on () çağrıldığında (yani genellikle sayfa yüklenirken) olay işleyicilerinin bağlanmasıdır. .On () çağrıldığında öğe mevcut değilse, olay ona bağlı olmayacaktır!

Olaylar DOM yoluyla yayıldığından, bunu .parent-element, sayfa yüklendiğinde var olduğunu bildiğimiz bir üst öğede ( aşağıdaki örnekte) delege edilmiş bir olay oluşturarak çözebiliriz . Bunu nasıl yapacağınız aşağıda açıklanmıştır:

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

Konuyla ilgili biraz daha okuma:

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

Sorunuz "ajax yüklü içerikte olayları nasıl bağlayacağınız" ise, şunu yapabilirsiniz:

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

böylece yapılandırmanızı her ajax kodunuza yerleştirmenize gerek kalmaz.

JQuery 1.7'den itibaren, .live()yöntem kullanımdan kaldırılmıştır. .on()Olay işleyicileri eklemek için kullanın .

Misal -

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

Hala bir çözüm arayanlar için, bunu yapmanın en iyi yolu olayı belgenin kendisine bağlamak ve "hazır" olayı ile bağlamamaktır. Örneğin:

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

});

Örneğin ajax yanıtınız html form girdileri içeriyorsa, bu harika olur:

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

});

bunun yerine jQuery.live () kullanın. Belgeler burada

Örneğin

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

ASP.NET için şunu deneyin:

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

Bu, sayfa yüklemede ve güncelleme paneli yüklemesinde çalışıyor gibi görünüyor

Lütfen tartışmanın tamamını bulun burada .