การใช้งานฟังก์ชัน .on() ของ jQuery

ฟังก์ชัน .on() ได้ถูกเพิ่มเข้ามาใน jQuery เวอร์ชัน 1.7 ซึ่งฟังก์ชัน .on() ใช้สำหรับผูก (attach) event handler function เข้ากับ element ที่เลือกจาก selector และยังสามารถผูกเข้าได้มากกว่าหนึ่ง event ด้วยนะครับ

รูปแบบการใช้งานฟังก์ชัน .on()  ของ jQuery

.on( events [, selector ] [, data ], handler(eventObject) )

events คือ string ที่ระบุ event ที่ต้องการผูก event handler เข้าไป เช่น “click” หรือถ้าต้องการผูกมากกว่าหนึ่ง event ก็จะเขียนเป็น “click change”

selector คือ string selector ที่อยู่ภายใต้ selector เช่น “#myid” เลือก element ที่มี id=”myid”

data คือ ข้อมูลที่ส่งไปยังฟังก์ชันที่จะผูกเข้ากับ event (event handler) เมื่อเกิด (trigger) event

handler(eventObject) คือ function ที่จะถูก execute เมื่อเกิด event ขึ้น

ตัวอย่างการใช้งานฟังก์ชัน .on() ของ jQuery

1. ถ้ามีการคลิกที่แท็ก p ให้ alert ข้อความที่อยู่ในแท็ก p

$("p").on("click", function(){
alert( $(this).text() );
});

2. ส่งข้อมูลไปยังฟังก์ชัน (event handler) เมื่อมีการคลิกแท็ก p

function alertImooh(event) {
  alert(event.data.blog);
}
$("p").on("click", {blog: "imooh.com"}, alertImooh);