เหตุการณ์ครั้งเดียวใน jQuery

เมื่อเราศึกษาการถอดการเชื่อมโยงเหตุการณ์ด้วย ความช่วยเหลือของเมธอด off, เราได้ใช้โครงสร้างต่อไปนี้:

$('li').on('click', function() {
	$(this).append('!');
	$(this).off('click', func);
});

ขั้นแรกเราแนบฟังก์ชันตัวจัดการด้วย ความช่วยเหลือของ on, จากนั้นถอดการเชื่อมโยงด้วยความช่วยเหลือของ off

ใน jQuery มีเมธอดที่สะดวกคือ one, ซึ่งอนุญาตให้เชื่อมโยงเหตุการณ์ครั้งเดียว - มันจะทำงานเพียงครั้งเดียวเท่านั้น จากนั้น จะถอดการเชื่อมโยงอัตโนมัติ เมธอดนี้ รับพารามิเตอร์แรกเป็นประเภทของเหตุการณ์ และพารามิเตอร์ที่สองเป็นฟังก์ชันที่เชื่อมโยง

ตัวอย่างต่อไปเราจะพิจารณาจากโค้ด HTML ด้านล่างนี้:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

โค้ด CSS มีลักษณะดังนี้:

li {
	width: 100px;
	cursor: pointer;
}

ตอนนี้เราจะเชื่อมโยงเหตุการณ์ครั้งเดียว กับแต่ละ li:

$('li').one('click', function() {
	$(this).append('!');
});

กรุณาคลิกที่รายการ ในลิสต์ อย่างที่คุณเห็น เราได้เอฟเฟกต์เดียวกัน ต้องขอบคุณ เมธอด one

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

สำหรับอินพุตทั้งหมด ให้ทำให้ พวกมันแสดง value ของตัวเองเมื่อ กดที่อินพุตใดก็ได้ แต่เพียง ครั้งแรกเท่านั้น การกดที่อินพุต ซ้ำอีกครั้งไม่ควรทำให้เกิดปฏิกิริยา

มีพารากราฟพร้อมตัวเลข เมื่อคลิกที่พารากราฟ ควรปรากฏเลขยกกำลังสองของตัวเลขที่ มันมีอยู่ภายในพารากราฟนั้น แต่เพียงครั้งแรกที่คลิกเท่านั้น เมื่อดับเบิลคลิกที่พารากราฟ ตัวเลขในพารากราฟ ควรเพิ่มเป็นสองเท่า แต่ก็เพียงครั้งแรกเท่านั้น

มีพารากราฟ จงทำให้เมื่อคลิกครั้งแรก ที่พารากราฟ ให้เพิ่ม '!' ต่อท้ายพารากราฟนั้น แต่เพียงครั้งแรกที่คลิกเท่านั้น