ฟังก์ชัน .on() ได้ถูกเพิ่มเข้ามาใน jQuery เวอร์ชัน 1.7 ซึ่งฟังก์ชัน .on() ใช้สำหรับผูก (attach) event handler function เข้ากับ element ที่เลือกจาก selector และยังสามารถผูกเข้าได้มากกว่าหนึ่ง event ด้วยนะครับ
[imooh_google_ads]
รูปแบบการใช้งานฟังก์ชัน .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);