คู่มือ jQuery on(): ผูก Event Handler แบบยืดหยุ่น

jQuery on() คืออะไร?

เมธอด on() ใช้ **ผูก Event Handler** ให้กับองค์ประกอบที่เลือก รองรับทุกประเภท Event (click, hover, submit, keypress, etc.) และรองรับ Event Delegation

ไวยากรณ์พื้นฐาน

$(selector).on(eventName, callbackFunction);

ตัวอย่างที่ 1: แสดงข้อความเมื่อคลิก (ใช้ append)

HTML

<button class="btn"> Click me! </button>
<div class="message"></div>

jQuery

$('.btn').on('click', function() {
  $('.message').append('The button has been clicked. ');
});

คลิกหลายครั้ง → ข้อความเพิ่มขึ้นเรื่อยๆ

ตัวอย่างที่ 2: แทนที่ปุ่มด้วยเนื้อหาใหม่ (ใช้ html)

HTML

<div>
  <button class="btn"> Click me! </button>
</div>

jQuery

$('.btn').on('click', function() {
  $('div').html('<p>The button has been replaced</p>');
});

คลิกครั้งแรก → ปุ่มหายไป แสดงข้อความแทน (ไม่สามารถคลิกซ้ำได้)

ข้อดีของ on()

• รองรับ **Event Delegation**: ผูกที่ Parent แล้วจับ Event จาก Child ได้ (Dynamic Elements)
• แทนที่ click(), bind(), live(), delegate() (Deprecated)
• จัดการหลาย Event พร้อมกัน: .on('click mouseenter', handler)

สรุป

on() เป็นมาตรฐานปัจจุบันสำหรับ Event Binding ใน jQuery ยืดหยุ่น รองรับ Dynamic Content และเป็น Best Practice ที่ควรใช้แทนเมธอดเก่าๆ