วิธีการผูกเหตุการณ์บน Ajax โหลดเนื้อหา?

ฉันมีลิงก์myLinkที่ควรแทรกเนื้อหาที่โหลด AJAX ลงในdiv(appendedContainer) ของหน้า HTML ของฉัน ปัญหาคือclickเหตุการณ์ที่ฉันผูกไว้กับ jQuery ไม่ได้ถูกดำเนินการกับเนื้อหาที่โหลดใหม่ซึ่งถูกแทรกลงใน appendedContainer clickเหตุการณ์ที่ถูกผูกไว้ในองค์ประกอบ DOM ที่ยังไม่ได้เต็มไปด้วยฟังก์ชั่น AJAX ของฉัน

ฉันต้องเปลี่ยนแปลงอะไรบ้างเพื่อที่เหตุการณ์จะผูกพัน?

HTML ของฉัน:

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

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

เนื้อหาที่จะโหลด:

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

ใช้การมอบหมายเหตุการณ์สำหรับองค์ประกอบที่สร้างแบบไดนามิก:

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

สิ่งนี้ใช้งานได้จริงนี่คือตัวอย่างที่ฉันต่อท้ายแองเคอร์กับคลาส.mylinkแทนdata- http://jsfiddle.net/EFjzG/

หากเนื้อหาถูกต่อท้ายหลังจากเรียก. on () คุณจะต้องสร้างเหตุการณ์ที่มอบสิทธิ์ในองค์ประกอบหลักของเนื้อหาที่โหลด เนื่องจากตัวจัดการเหตุการณ์ถูกผูกมัดเมื่อเรียก. on () (เช่นโดยปกติจะโหลดหน้าเว็บ) หากองค์ประกอบไม่มีอยู่เมื่อเรียก. on () เหตุการณ์จะไม่ถูกผูกมัดกับมัน!

เนื่องจากเหตุการณ์แพร่กระจายผ่าน DOM เราจึงสามารถแก้ปัญหานี้ได้โดยการสร้างเหตุการณ์ที่มอบสิทธิ์ในองค์ประกอบหลัก ( .parent-elementในตัวอย่างด้านล่าง) ซึ่งเราทราบว่ามีอยู่เมื่อโหลดหน้าเว็บ วิธีการมีดังนี้

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

อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้:

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

หากคำถามของคุณคือ "วิธีผูกเหตุการณ์ในเนื้อหาที่โหลด ajax" คุณสามารถทำได้ดังนี้:

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

ดังนั้นคุณไม่จำเป็นต้องวางการกำหนดค่าของคุณให้กับรหัส ajax ทุกตัว

สำหรับ jQuery 1.7 .live()วิธีนี้เลิกใช้แล้ว ใช้.on()แนบตัวจัดการเหตุการณ์

ตัวอย่าง -

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

สำหรับผู้ที่ยังคงมองหาวิธีแก้ไขอยู่วิธีที่ดีที่สุดคือผูกเหตุการณ์ไว้บนเอกสารและไม่ผูกกับเหตุการณ์ที่ "พร้อม" เช่น:

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

});

หากการตอบกลับ ajax ของคุณมีอินพุตแบบฟอร์ม html มากกว่านี้จะดีมาก:

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

});

ใช้ jQuery.live () แทน เอกสารที่นี่

เช่น

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

สำหรับ ASP.NET ลองสิ่งนี้:

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

ดูเหมือนว่าจะใช้ได้กับการโหลดหน้าและการโหลดแผงการอัปเดต

กรุณาหาการสนทนาแบบเต็มนี่