การมอบหมายงานใน jQuery

หากคุณเคยศึกษา JavaScript มาก่อน คุณคงเคยพบกับหัวข้อ การมอบหมายเหตุการณ์ (event delegation) ซึ่งสามารถใช้ เพื่อแก้ปัญหาในการกำหนดเหตุการณ์ให้กับองค์ประกอบใหม่ได้ มาดูกันว่า ใน jQuery จะเป็นอย่างไร

ลองดูโค้ด HTML ต่อไปนี้:

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

CSS สำหรับโค้ดนี้มีหน้าตาดังนี้:

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

คราวนี้ ใช้เมธอด on เพื่อผูกเมธอด click ไม่ใช่ กับรายการในลิสต์ li อย่างที่เคยทำในบทเรียน ก่อนหน้า แต่ให้ผูกกับลิสต์ ul เอง และส่ง พารามิเตอร์ตัวที่สอง (ซึ่งเป็นตัวเลือก) 'li' ในฐานะ ตัวเลือกสำหรับลูกหลาน (descendant selector) มาดูกันว่าผลลัพธ์จะเป็นอย่างไร:

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

มี ul อยู่หนึ่งอัน และภายในมี li หลายรายการ ใต้ ul ให้สร้างปุ่ม โดยเมื่อกดปุ่มนี้แล้ว จะต้องมี li ใหม่เพิ่มเข้ามาที่ท้าย ul พร้อมกับข้อความ 'item' ทำให้เมื่อคลิกที่ แต่ละ li จะมี '!' ต่อท้ายข้อความ และต้องใช้งานได้กับ li ที่เพิ่มเข้ามาใหม่ด้วย แก้ไขปัญหานี้โดยใช้การมอบหมายงาน (กล่าวคือ เหตุการณ์ต้องถูกกำหนด ไว้ที่ ul)

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