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


99

ฉันมีลิงก์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>

1
หมายเหตุ: สิ่งต่อไปนี้ใช้ไม่ได้ คุณไม่มี.ตัวเลือกชั้นเรียน
ไม่ได้กำหนด

นี่เป็นการพิมพ์ผิด! มันยังใช้ไม่ได้
เก็บตัว

1
ดู jQuery .load ()วิธีการ $ ('# เป้าหมาย'). load ('source.html');
km6zla

load () ทำอะไรต่างออกไปหรือไม่?
เก็บตัว

คำตอบ:


231

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

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

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


นี่คือสิ่งที่ฉันเขียนว่าฉันทำ
เก็บตัว

@confile จริงเหรอ? ฉันอ่านคำถามของคุณสองครั้งแล้วและไม่เห็นว่าเป็นลายลักษณ์อักษรหรือรหัส
dsgriffin

@confile .. ดูคำตอบ agian .. ที่แตกต่างจากที่คุณมี
Mohammad Adil

2
@confile คำตอบของฉันใช้งานได้ !! นี่คือตัวอย่างของมัน - jsfiddle.net/EFjzG
dsgriffin

1
สวัสดีคำตอบนี้ใช้ได้ดี มีการแนบเหตุการณ์ในเอกสารทั้งหมดดังนั้นโดยพื้นฐานแล้วการคลิกบนหน้าทุกครั้งจะทำให้เกิดเหตุการณ์ขึ้น แต่จากนั้นตัวเลือก ".mylink" จะถูกใช้เพื่อกรองเหตุการณ์การคลิกที่เราต้องการ เทคนิคที่ยอดเยี่ยม
Emir

24

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

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

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

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


3
ฉันชอบคำตอบนี้ไปหนึ่งโดย @lifetimes เพราะมันบอกให้ผมตั้งตัวจัดการเพื่อองค์ประกอบหลักบางอย่างที่เป็นปัจจุบันที่เวลาในการโหลดไม่จำเป็นต้องทุกทางขึ้นไปยังเอกสาร สิ่งนี้ทำให้ตัวเลือกในอาร์กิวเมนต์ที่สองonมีแนวโน้มที่จะจับคู่โดยไม่ได้ตั้งใจน้อยลง
R. Schreurs

หาก ajax โหลดคลาส html ด้วย parent-element จะไม่ทำงาน
jafar pinjar

6

หากคำถามของคุณคือ "วิธีผูกเหตุการณ์ในเนื้อหาที่โหลด 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 ทุกตัว


2

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

ตัวอย่าง -

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

1

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

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

});


1

หากการตอบกลับ 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);
}

});


0

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

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

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

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


2
"Sys.Application" นี้มาจากไหน? - '
André Marcondes Teixeira

ดูเหมือนว่าจะเป็นของ ASP.NET: msdn.microsoft.com/en-us/library/vstudio/…
Michael
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.