เหตุใดจึงใช้ jQuery บน () แทนการคลิก ()

ขณะนี้มี jQuery เมื่อฉันต้องการทำอะไรบางอย่างเมื่อเกิดการคลิกฉันจะทำเช่นนี้ ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

ฉันกำลังดูรหัสบางอย่างที่คนอื่นมีในโครงการและพวกเขาทำแบบนี้ ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

สังเกตว่าดูเหมือนว่าจะทำสิ่งเดียวกันเท่าที่ฉันสามารถบอกได้ยกเว้นว่าพวกเขากำลังใช้ฟังก์ชัน live () ซึ่งตอนนี้เลิกใช้แล้วและเอกสาร jQuery บอกว่าให้ใช้on()แทน แต่ทำไมใช้ live / on () แทนตัวอย่างแรกของฉัน

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

เพื่อแสดงให้เห็น:

http://jsfiddle.net/AJRw3/

on()นอกจากนี้ยังสามารถมีความหมายเหมือนกันได้click()หากคุณไม่ได้ระบุตัวเลือก:

$('.elementClass').click(function() { // code 
});

มีความหมายเหมือนกันกับ

$('.elementClass').on('click', function() { // code
});

ในแง่ที่ว่ามันมี elementClassแต่จะเพิ่มตัวจัดการเวลาหนึ่งไปยังองค์ประกอบทั้งหมดที่มีระดับ หากคุณมีที่elementClassมาใหม่เช่น$('<div class="elementClass" />')ตัวจัดการจะไม่ถูกผูกไว้กับองค์ประกอบใหม่นั้นคุณต้องทำ:

$('#container').on('click', '.elementClass', function() { // code
});

สมมติว่า#containerเป็น.elementClassบรรพบุรุษของ

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

การใช้click()เป็นนามแฝงbind('click' ...)ของ การใช้bind()จะใช้ DOM เหมือนเดิมเมื่อมีการตั้งค่าตัวฟังเหตุการณ์และผูกฟังก์ชันกับแต่ละองค์ประกอบที่ตรงกันใน DOM กล่าวคือหากคุณใช้$('a').click(...)คุณจะผูกฟังก์ชันที่ให้มากับเหตุการณ์การคลิกของทุกแท็กจุดยึดใน DOM ที่พบเมื่อโค้ดนั้นทำงาน

ใช้live()เป็นวิธีเก่าใน jQuery; มันถูกใช้เพื่อเชื่อมโยงเหตุการณ์เช่นเดียวกับที่bind()ทำ แต่ไม่เพียงผูกเข้ากับองค์ประกอบใน DOM เมื่อโค้ดทำงานเท่านั้น แต่ยังรับฟังการเปลี่ยนแปลงใน DOM และจะเชื่อมโยงเหตุการณ์กับองค์ประกอบที่จับคู่ในอนาคตด้วย สิ่งนี้มีประโยชน์หากคุณกำลังดำเนินการจัดการ DOM และคุณต้องการให้มีเหตุการณ์อยู่ในองค์ประกอบบางอย่างที่อาจถูกลบ / อัปเดต / เพิ่มไปยัง DOM ในภายหลัง แต่จะไม่มีเมื่อโหลด DOM ครั้งแรก

สาเหตุที่live()คิดค่าเสื่อมราคาในขณะนี้เนื่องจากมีการใช้งานไม่ดี ในการใช้งานlive()คุณต้องสามารถเลือกอย่างน้อยหนึ่งองค์ประกอบใน DOM ในตอนแรก (ฉันเชื่อว่า) นอกจากนี้ยังทำให้สำเนาของฟังก์ชันทำงานถูกผูกไว้กับแต่ละองค์ประกอบ - และถ้าคุณมี 1,000 องค์ประกอบนั่นคือฟังก์ชันที่คัดลอกจำนวนมาก

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

... และนั่นคือความแตกต่างและเหตุใดแต่ละฟังก์ชันจึงมีอยู่และทำไมจึงlive()คิดค่าเสื่อมราคา

• $("a").live()-> จะใช้กับทุกคน<a>แม้ว่าจะถูกสร้างขึ้นหลังจากนี้จะถูกเรียก
• $("a").click()-> จะใช้กับทั้งหมด<a>ก่อนที่จะถูกเรียกเท่านั้น (นี่คือทางลัดของbind()และon()ใน 1.7)
• $("a").on()-> จัดเตรียมฟังก์ชันทั้งหมดที่จำเป็นสำหรับการเชื่อมต่อตัวจัดการเหตุการณ์ (ใหม่ล่าสุดใน jQuery 1.7)

คำคม :

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

เมธอด. on () แนบตัวจัดการเหตุการณ์กับชุดขององค์ประกอบที่เลือกในปัจจุบันในวัตถุ jQuery สำหรับ jQuery 1.7 เมธอด. on () มีฟังก์ชันทั้งหมดที่จำเป็นสำหรับการแนบตัวจัดการเหตุการณ์

สำหรับเวอร์ชันก่อนหน้านี้เมธอด. bind () ใช้สำหรับการแนบตัวจัดการเหตุการณ์เข้ากับองค์ประกอบโดยตรง

click()on()เป็นทางลัดไปยังคณะผู้แทนวิธีการที่ไม่ใช่ของ ดังนั้น:

$(".close-box").click() === $(".close-box").on('click')

ในการมอบหมายงานด้วยon()เช่น. ในวัตถุที่สร้างแบบไดนามิกคุณสามารถทำได้:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

แต่on()แนะนำการมอบหมายในองค์ประกอบคงที่ไม่เพียง แต่documentเป็นเช่นlive()นั้น:

$("#closestStaticElement").on('click', '.close-box')

คุณควรอ่านข้อมูลเกี่ยวกับความแตกต่างระหว่างlivebindและ

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

ในทางตรงกันข้ามตัวจัดการที่ต่อผ่านbind(และทางลัดเช่นclick) แนบตัวจัดการโดยตรงกับองค์ประกอบ DOM ที่ตรงกับตัวเลือกดังนั้นจึงถูกผูกไว้กับองค์ประกอบที่มีอยู่ในตอนนี้เท่านั้น

ผลที่ตามมาของliveความยืดหยุ่นคือประสิทธิภาพที่ลดลงดังนั้นควรใช้เมื่อคุณต้องการฟังก์ชันที่มีให้เท่านั้น

$el.click(fn) เป็นทางลัดสำหรับ $el.on('click', fn)

ดูhttp://api.jquery.com/click/และhttp://api.jquery.com/on/สำหรับข้อมูลเพิ่มเติม

เมื่อคุณต้องการเชื่อมโยงตัวจัดการเหตุการณ์บางอย่างdynamically added elementsคุณต้องใช้live(เลิกใช้งานแล้ว) หรือonทำให้มันใช้งานได้ เพียงแค่$('element').click(...);ไม่ทำงานกับองค์ประกอบใด ๆ ที่เพิ่มแบบไดนามิกใน DOM

เพิ่มเติมเกี่ยวกับความแตกต่างระหว่าง .bind ของ jQuery () .live () และ .delegate ()

$ .click () เป็นเพียงทางลัดสำหรับผูกหรือเปิด จาก jQuery docs:

ในสองรูปแบบแรกวิธีนี้เป็นทางลัดสำหรับ .bind ("click", handler) และสำหรับ. on ("click", handler) ของ jQuery 1.7 ในรูปแบบที่สามเมื่อเรียก. click () โดยไม่มีอาร์กิวเมนต์จะเป็นทางลัดสำหรับ .trigger ("click")

.on()วิธีแนบจัดการเหตุการณ์ไปยังชุดที่เลือกในปัจจุบันขององค์ประกอบในวัตถุ jQuery click()วิธีการผูกตัวจัดการเหตุการณ์ที่ "คลิก" เหตุการณ์ JavaScript หรือทริกเกอร์ว่าเหตุการณ์ในองค์ประกอบ

ในที่ราบ .click(...หากเป้าหมายของตัวเลือกเปลี่ยนแปลงทันที (เช่นผ่านการตอบสนองของ ajax) คุณจะต้องกำหนดพฤติกรรมอีกครั้ง

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

ใน onเมธอดตัวจัดการเหตุการณ์จะแนบกับองค์ประกอบหลักแทนที่จะเป็นเป้าหมาย

ตัวอย่าง: $(document).on("click", ".className", function(){});

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