Aug
14
2010

ถึงคราวของ jQuery .delegate() กันบ้างครับ

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

วันนี้มาทำความรู้จักกับ Method Deledate กันบ้างครับซึ่ง Method หรือ Function นี้จะมีอยู่ใน jQuery 1.4 นะครับ ตามคำจำกัดความที่ทาง jQuery นั้นเขียนไว้ว่า “Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.” แปลเป็นไทยได้ทำนองนี้ครับ (แปลได้ งูๆปลาๆนะครับ – -’ ) jQuery delegate ก็คือ Function หรือ method ที่ใช้ในการ แทรก Event ต่างๆเข้าไปสามารถแทรกเข้ามาได้มากกว่า 1 event เช่น event Click, hover, mouseover, mouseout เป็นต้น ซึ่งจะแทรกเข้าไปในทุกๆ elements ที่ตรงกับที่เราได้ selector เอาไว้

เช่นถ้าเราทำการ selector element ที่ชื่อ ul ซึ่งแน่นอนว่าใน ul นั้นก็จะต้องมี li ที่เป็น elements ลูกอยู่แล้ว element อะไรก็ตามที่อยู่ภายใต้ ul ก็จะถูกกำหนด event ให้โดยอัตโนมัติ และที่สำคัญ มันสามารถที่จะกำหนด event ให้กับ elements ที่ยังไม่มี ณ ตอนปัจจุบัน หรือเราอาจจะสร้างขึ้นมาภายหลัง มันเลยเหมาะกับโปรแกรมประเภท Dynamic event เป็นอย่างมากครับ เพราะมันเป็น Future หรืออนาคต ที่เราเป็นคนกำหนดว่าจะเกิดอะไรขึ้น อ่านไปอ่านมาก็อาจจะงงไปกันใหญ่ มาดู code ดีกว่าครับ

Code นี้เป็นตัวอย่างการเขียน event แบบเก่านะครับจะได้เห็นความแตกต่างชัดเจน

1
2
3
4
5

$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});

จาก code ด้านบนจะเห็นได้ว่ามีการใช้ function each ก็คือการ วนลูป นั้นเองครับ จาก code ตัวอย่าง เราได้ทำการ selector element TABLE โดยใน TABLE มันต้องมี elements ลูกที่เป็น TR กับ TD อยู่แล้ว แต่ใน code นี้ได้ทำการ selector เอา TD มา และใช้ function live ในการกำหนด Event Hover ให้กับ TD

1
2
3

...
$("td", this).live("hover", function(){ ...
...

ดังนั้นผลที่ได้ก็คือใน Elements TD ทั้งหมดที่อยู่ภายใต้ TABLE นั้นจะถูกกำหนด event Hover ให้ทั้งหมด โดยการทำงานที่จะทำงานเมื่อมี event Hover เกิดขึ้น โดย toggleClass “Hover” เข้าไปนั้นเอง

เอาละมาดู code Function delegate() กันบ้าง โดยการทำงานนี้จะได้ผลเหมือนกันทุกประการ

1
2
3

$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

จะเห็นว่ามีการรวมเอาทั้ง selector และ live เข้าไปไว้ด้วยกันเลยทำให้ code สั้นไปได้เยอะเลยครับ เจ๋งใหมละ!!

มาดู code ที่ผมอธิบายไว้ว่ามันรองรับการเขียนแนว Dynamic Event หรือการกำหนด Event แบบอนาคตกันบ้าง

1
2
3
4
5
6
7
8
9
10
11
12

.........
<body>
<p>Click me!</p>

<script>
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
</script>

</body>
.......

จาก code ด้านบนนี้จะเห็นว่ามีการกำหนด Event Click ให้กับ Tag P ที่มีอยู่ในปัจจุบัน เน้นนะครับ ที่มีในปัจจุบัน และ ในอนาคต ด้วย จากตัวอย่าง ถ้าหากเรา click ที่ tag P แล้วมันจะเพื่ิอ Tag P ขึ้นมาอีกหลัง Tag P ตัวปัจจุบัน และ tag p ที่เพิ่มขึ้นมาใหม่นั้น ก็จะมี Event Click กำหนดไว้เรียบร้อยครับ อันนี้ก็เจ๋งอีกเช่นกัน

ลองเอาไปแก้ปัญหากับงานที่ทำอยู่ดูนะครับ ตอนนี้ผมก็ได้ไอเดียใหม่ๆในการแก้ไขปัญหาของงานที่กำลังทำอยู่เหมือนกัน ได้ผลยังไงก็เอามาแช์กันที่ Forum หรือ Facebook ได้ตลอดนะครับ