ในอดีตฉันใช้ jQuery ผูกกับเหตุการณ์โดยตรง อย่างไรก็ตามในเวลานั้นฉันไม่ได้สร้างองค์ประกอบ DOM แบบไดนามิก แต่องค์ประกอบ DOM ที่มีอยู่เดิมบนหน้าเว็บสำหรับการผูกเหตุการณ์ เมื่อเร็ว ๆ นี้เมื่อฉันทดสอบเหตุการณ์ DOM ที่สร้างขึ้นแบบไดนามิกฉันพบว่าเหตุการณ์ไม่ถูกต้องดังนั้นฉันจึงทดสอบ:
1. สาเหตุของความล้มเหลวของเหตุการณ์:
(1) การผูกเหตุการณ์ที่มีผลผูกพันนั้นใช้ได้เฉพาะกับองค์ประกอบที่มีอยู่ใน DOM ไม่สามารถตรวจสอบองค์ประกอบที่เราเพิ่มได้ในภายหลังดังนั้นจึงไม่สามารถผูกมัดได้
(2) ในทำนองเดียวกันเมื่อคุณใช้ var aa = document.getElementsByTagname ("องค์ประกอบที่สร้างขึ้นแบบไดนามิก"); เพื่อให้ได้องค์ประกอบที่สร้างขึ้นแบบไดนามิกเนื่องจากหน้าเว็บจะทำการเริ่มต้นการเริ่มต้นเพียงครั้งเดียวเท่านั้นและองค์ประกอบ DOM ที่สร้างขึ้นแบบไดนามิกไม่สามารถตรวจสอบได้หลังจากนั้น
2. โซลูชัน:
(1) ผูกเหตุการณ์เพิ่มเติมในแต่ละสถานที่ที่สร้างขึ้นแบบไดนามิกเช่นตัวอย่างในบล็อกนี้
(2) เปลี่ยนการผูกมัดเป็นสดเนื่องจากมีการตรวจสอบการใช้ชีวิตแบบเรียลไทม์และยังมีประสิทธิภาพสำหรับองค์ประกอบ DOM ที่เพิ่มเข้ามาใหม่ (เนื่องจากมีผลผูกพันและการตัดสินอย่างต่อเนื่องอาจส่งผลกระทบต่อปัญหาประสิทธิภาพของเว็บ)
(3) เปลี่ยนการผูกเป็นตัวแทนเนื่องจากผู้ได้รับมอบหมายจะถูกตรวจสอบแบบเรียลไทม์
(4) ใน jQuery1.7, bind (), live () และวิธีการมอบหมาย () ถูกแทนที่ด้วย ON
3. เกี่ยวกับเหตุผลของความล้มเหลวของเหตุการณ์ล่าสุด: ในหน้าเว็บดั้งเดิม (สามารถดูรหัสได้ที่ https://github.com/ufowl/ife/tree/master/stage02/task16) ฉันต้องการให้ปุ่มลบสร้างขึ้นในตาราง เมื่อเริ่มต้นการเชื่อมโยงเหตุการณ์ปุ่มในตารางที่ได้รับจะว่างเปล่าดังนั้นองค์ประกอบที่ถูกผูกไว้จะว่างเปล่าเสมอดังนั้นจึงไม่มีการตอบสนองเมื่อคลิกปุ่ม
4. วิธีแก้ปัญหาสุดท้าย: ก่อนอื่นรับตารางจากนั้นผูกเหตุการณ์การคลิกของตาราง (เนื่องจากตารางอยู่ในองค์ประกอบ DOM ที่มีอยู่แล้ว) จากนั้นจับเป้าหมายของเหตุการณ์ (ตัวอย่างเช่นคลิกปุ่มในตารางในเวลานี้เนื่องจากปุ่มถูกสร้างขึ้นแบบไดนามิก
หมายเหตุ: มีการระบุสองประเด็นที่นี่:
(1) องค์ประกอบในตารางถูกเพิ่มลงในตารางดังนั้นเมื่อคลิกปุ่มนั้นปุ่มที่คุณได้รับคือสิ่งที่คุณต้องการ
(2) เหตุใดจึงมีการเพิ่มปุ่มลงในตาราง แต่ยังไม่สามารถรับได้? เนื่องจากปุ่มในตารางได้รับเมื่อฟังก์ชั่น init () เริ่มต้น แต่ไม่มีการดำเนินการในเวลานี้ดังนั้นสิ่งที่ได้รับจะว่างเปล่าดังนั้นจึงไม่มีองค์ประกอบใดที่ถูกผูกไว้
ปัญหาทั้งสองที่ต้องให้ความสนใจกับข้างต้นจะต้องมีความโดดเด่นอย่างชัดเจนและนี่คือกุญแจสำคัญในการแก้ไขปัญหา
5. เกี่ยวกับการผูก: หลังจากเหตุการณ์ที่มีผลผูกพันแต่ละเหตุการณ์จะถูกผูกไว้ คลอดแล้วกลับมาใหม่มิฉะนั้นเหตุการณ์จะมีอยู่เสมอ นี่คือเหตุผลว่าทำไมเมื่อทำงานในโครงการบางครั้งผลลัพธ์ของการร้องขอ AJAX จะถูกทับเช่น 1, 2, 4, 8 เพราะถ้าใช้การผูกแต่ละเหตุการณ์การเรียกแต่ละเหตุการณ์จะถูกผูกไว้กับการดำเนินการ ดังนั้นเมื่อมีการเรียกใช้ครั้งแรกคำขอ AJAX จะถูกร้องขอหนึ่งครั้ง เมื่อครั้งที่สองถูกทริกเกอร์คำขอ AJAX จะเป็น 1+1 = 2 ครั้ง ครั้งที่สามคือ 1+2+1 = 4 ครั้ง; ครั้งที่สี่คือ 1+2+4+1 = 8 ครั้งและอื่น ๆ ดังนั้นหากคุณใช้การผูกกับเหตุการณ์ที่ผูกมัดคุณต้องยกเลิกเหตุการณ์ดั้งเดิมขององค์ประกอบก่อนแล้วจึงผูกกับเหตุการณ์เพื่อให้คำขอ AJAX ไม่ก่อให้เกิดหลายครั้ง
บทความข้างต้นเกี่ยวกับเหตุผลและวิธีแก้ปัญหาสำหรับความล้มเหลวของการสร้างเหตุการณ์ที่มีผลผูกพัน DOM เป็นเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยบรรณาธิการ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น