jQuery .live () vs .on () วิธีการเพิ่มเหตุการณ์คลิกหลังจากโหลด HTML แบบไดนามิก

ฉันใช้ jQuery v.1.7.1 โดยที่วิธีการ. live () ไม่ชัดเจน

ปัญหาที่ฉันมีคือเมื่อโหลด html ไปยังองค์ประกอบแบบไดนามิกโดยใช้:

$('#parent').load("http://..."); 

หากฉันลองและเพิ่มคลิกเหตุการณ์หลังจากนั้นจะไม่ลงทะเบียนเหตุการณ์โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้:

$('#parent').click(function() ...); 

หรือ

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

วิธีที่ถูกต้องในการบรรลุฟังก์ชั่นนี้คืออะไร? ดูเหมือนว่าจะทำงานกับ. live () สำหรับฉัน แต่ฉันไม่ควรใช้วิธีการนั้น โปรดทราบว่า #child เป็นองค์ประกอบที่โหลดแบบไดนามิก

ขอบคุณ

หากคุณต้องการให้ตัวจัดการการคลิกทำงานให้กับองค์ประกอบที่ได้รับการโหลดแบบไดนามิกคุณต้องตั้งค่าตัวจัดการเหตุการณ์บนวัตถุแม่ (ที่ไม่ได้โหลดแบบไดนามิก) และให้ตัวเลือกที่ตรงกับวัตถุแบบไดนามิกของคุณดังนี้:

$('#parent').on("click", "#child", function() {});

ตัวจัดการเหตุการณ์จะถูกแนบไปกับ#parentวัตถุและเมื่อใดก็ตามที่เหตุการณ์การคลิกเกิดขึ้นกับสิ่งที่เกิดขึ้น#childมันจะเริ่มตัวจัดการการคลิกของคุณ สิ่งนี้เรียกว่าการจัดการเหตุการณ์ที่มอบหมาย (การจัดการเหตุการณ์ถูกมอบหมายให้กับวัตถุแม่)

มันทำแบบนี้เพราะคุณสามารถแนบเหตุการณ์ไปยัง#parentวัตถุแม้ในขณะ#childนี้ยังไม่มีวัตถุ แต่เมื่อมันมีอยู่ในภายหลังและได้รับการคลิกที่เหตุการณ์คลิกจะฟองขึ้นไปที่#parentวัตถุมันจะเห็นว่ามันมาใน#childและ มีตัวจัดการเหตุการณ์สำหรับการคลิก#childและเริ่มกิจกรรมของคุณ

ลองสิ่งนี้:

$('#parent').on('click', '#child', function() {
    // Code
});

จาก$.on()เอกสาร:

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

#childองค์ประกอบของคุณไม่มีอยู่เมื่อคุณโทรหา$.on()ดังนั้นเหตุการณ์จึงไม่ถูกผูกไว้ (ไม่เหมือน$.live()) #parentแต่ไม่อยู่จึงมีผลผูกพันเหตุการณ์เพื่อที่จะปรับ

อาร์กิวเมนต์ที่สองในรหัสของฉันไปทำหน้าที่เป็น 'กรอง' ทริกเกอร์เฉพาะในกรณีที่เหตุการณ์ฟองขึ้นไปจาก#parent#child

$(document).on('click', '.selector', function() { /* do stuff */ });

แก้ไข: ฉันให้ข้อมูลเพิ่มเติมอีกเล็กน้อยเกี่ยวกับวิธีการทำงานของเพราะ ... คำ ด้วยตัวอย่างนี้คุณกำลังวางฟังบนเอกสารทั้งหมด

เมื่อคุณclickจับคู่องค์ประกอบใด ๆ.selectorเหตุการณ์จะพุ่งขึ้นไปที่เอกสารหลักตราบใดที่ไม่มีผู้ฟังรายอื่นที่เรียกevent.stopPropagation()วิธีการซึ่งจะทำให้อันดับของเหตุการณ์เป็นองค์ประกอบหลัก

แทนที่จะผูกพันกับองค์ประกอบเฉพาะหรือชุดองค์ประกอบคุณกำลังฟังเหตุการณ์ใด ๆ ที่มาจากองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ ซึ่งหมายความว่าคุณสามารถสร้างผู้ฟังได้หนึ่งครั้งซึ่งจะจับคู่องค์ประกอบที่มีอยู่ในปัจจุบันโดยอัตโนมัติรวมถึงองค์ประกอบที่เพิ่มเข้ามาแบบไดนามิก

นี่คือเหตุผลที่ดีสำหรับเหตุผลบางประการรวมถึงประสิทธิภาพและการใช้หน่วยความจำ (ในแอปพลิเคชันขนาดใหญ่)

แก้ไข:

เห็นได้ชัดว่าองค์ประกอบหลักที่ใกล้เคียงที่สุดที่คุณสามารถฟังนั้นดีกว่าและคุณสามารถใช้องค์ประกอบใด ๆ แทนdocumentตราบใดที่เด็ก ๆ ที่คุณต้องการติดตามกิจกรรมอยู่ในองค์ประกอบหลักนั้น ... แต่นั่นไม่มีอะไรทำ กับคำถาม

เทียบเท่า. live () ใน 1.7 มีลักษณะดังนี้:

$(document).on('click', '#child', function() ...); 

โดยทั่วไปให้ดูเอกสารสำหรับคลิกกิจกรรมแล้วกรองเป็น #child

ฉันรู้ว่ามันสายไปหน่อยสำหรับคำตอบ แต่ฉันได้สร้างโพลีฟิลสำหรับวิธีการ. live () ฉันทดสอบใน jQuery 1.11 และดูเหมือนว่าจะใช้งานได้ดี ฉันรู้ว่าเราควรใช้เมธอด. on () ทุกที่ที่เป็นไปได้ แต่ในโครงการขนาดใหญ่ซึ่งไม่สามารถแปลงการโทรทั้งหมด. live () ไปยังการเทียบเท่า. on () ได้ไม่ว่าด้วยเหตุผลใดก็ตาม งาน:

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

เพียงรวมไว้หลังจากที่คุณโหลด jQuery และก่อนที่จะเรียกใช้ live ()

.on () สำหรับ jQuery เวอร์ชัน 1.7 ขึ้นไป หากคุณมีรุ่นที่เก่ากว่าใช้สิ่งนี้:

$("#SomeId").live("click",function(){
    //do stuff;
});

ฉันใช้ 'สด' ในโครงการของฉัน แต่มีเพื่อนคนหนึ่งแนะนำว่าฉันควรใช้ 'เปิด' แทนการใช้ชีวิต และเมื่อฉันพยายามใช้มันฉันก็ประสบปัญหาเหมือนคุณ

ในหน้าของฉันฉันสร้างแถวตารางของปุ่มและสิ่งต่างๆมากมายแบบไดนามิก แต่เมื่อฉันใช้เวทย์มนตร์หายไป

โซลูชันอื่น ๆ เช่นใช้งานเหมือนเด็ก ๆ เพียงแค่เรียกใช้ฟังก์ชั่นของคุณทุกครั้งที่มีการคลิก แต่ฉันหาวิธีทำให้มันเกิดขึ้นอีกครั้งและนี่คือทางออก

เขียนรหัสของคุณเป็น:

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

โทรเข้า (); หลังจากที่คุณสร้างวัตถุของคุณในหน้านี้

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

ด้วยวิธีนี้ฟังก์ชั่นของคุณถูกเรียกเมื่อมันควรจะไม่คลิกทุกครั้งในหน้า