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

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

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

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

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

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

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

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