jQueryTips by Tee++; » event http://www.jquerytips.com Coding is fun. Sun, 25 Apr 2010 11:30:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 การจัดการกับ event ที่มีมากกว่า 1 ใน function เดียวกัน http://www.jquerytips.com/2008/08/18/event-handling/ http://www.jquerytips.com/2008/08/18/event-handling/#comments Mon, 18 Aug 2008 04:46:08 +0000 Tee++; http://www.jquerytips.com/?p=122 เคยเจอปัญหามั้ยครับ ที่ว่า ต้องการใช้ event ที่มากกว่า 1 ตัว เช่น focus, blur จะให้ทำงานที่ function เดียวกัน ซึ่ง jQuery ได้เตรียมตรงนี้มาให้เราแล้ว ในส่วนของ event handling ทำให้เราทพงานสะดวกขึ้นมาก เช่น..

สมมุติผมมจะให้ event 2 ตัวทำงานใน function เดียวกัน ผมก็สามารถเขียนสั้นๆ ลงไปได้

  1. $(‘p’).bind(‘click dblclick’, function() {
  2.   // do something
  3. });

ซึ่งนอกเหนือจากนี้ jQuery ยัง เตรียมการ handling แบบอื่นๆ ที่สะดวกกับเรามาก ลองไปอ่านกันที่ event handling ใน jQuery.com กันได้เลย

http://docs.jquery.com/Events

]]> http://www.jquerytips.com/2008/08/18/event-handling/feed/ 0 livequery ปลั๊กอินที่ ช่วยแก้ปัญหา JS ไม่ยอมเชื่อฟังหลังจาก DOM อัพเดท http://www.jquerytips.com/2008/08/15/jquery-livequery/ http://www.jquerytips.com/2008/08/15/jquery-livequery/#comments Thu, 14 Aug 2008 17:52:36 +0000 Tee++; http://www.jquerytips.com/?p=114 วันนี้มาแนะนำ plugin ดีๆ อีกตัว…

โปรแกรมเมอร์หลายคนที่เขียน ajax หรือ javascript บ่อยๆ คงเคยเจอปัญหา ว่า javascript ไม่ยอม ทำงานต่อหลังจากที่เรา append DOM ใหม่ๆ ที่มี event เข้ามาด้วย

จริงๆ ผมก็เคยแนะนำวิธีไปคร่าวๆ แล้วเหมือนกัน ใน “วิธีแก้ไขปัญหา events ไม่ทำงานหลังจาก ajax requested”

แต่วันนี้จะมาทำเรื่องง่ายให้เป็นเรื่อง ง่ายเข้าไปอีด้วย plugin ดีๆ ตัวนี้ “livequery”

สมมุติว่าเราเขียน jquery แบบนี้

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>jqueryTips.com</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script language="JavaScript">
  8. <!–
  9. $(document).ready(function() {
  10.  
  11.         $(‘ul#container li’).click(function() {
  12.                 $(this).clone().appendTo(‘ul#container’);
  13.         });
  14.  
  15. });
  16. //–>
  17. </script>
  18. </head>
  19. <body>
  20.  
  21. <ul id="container">
  22.         <li><a href="#">Try me</a></li>
  23. </ul>
  24.  
  25. </body>
  26. </html>

ซึ่งการเขียนแบบนี้ แน่นอนว่า หลังจากที่ มีการ append DOM ขึ้นมาใหม่แล้ว ตัวที่ append ขึ้นมาจะไม่สามารถทำงานต่อไปได้ แต่ถ้าเราเปลี่ยนมาเป็นเขียนโดยใช้ livequery ช่วย แบบนี้

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>jqueryTips.com</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="jquery.livequery.pack.js"></script>
  8. <script language="JavaScript">
  9. <!–
  10. $(document).ready(function() {
  11.  
  12.         $(‘ul#container li’).livequery(‘click’, function() {
  13.                 $(this).clone().appendTo(‘ul#container’);
  14.         });
  15.  
  16. });
  17. //–>
  18. </script>
  19. </head>
  20. <body>
  21.  
  22. <ul id="container">
  23.         <li><a href="#">Try me</a></li>
  24. </ul>
  25.  
  26. </body>
  27. </html>

ปัญหาทุกอย่างก็จะหมดไปทันที ทั้งยังสามารถเอาไปใช้กับ ajax ได้อย่างสบาย ลองดูละกัน ^^

Ps. ณ ปัจจุบัน jQuery 1.3x บรรจุ function live ไว้ใน core แล้ว ไม่ต้องทำงานผ่าน plugin livequery อีกต่อไป

jQuery/events/live

]]> http://www.jquerytips.com/2008/08/15/jquery-livequery/feed/ 1 วิธีแก้ไขปัญหา events ไม่ทำงานหลังจาก ajax requested http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/ http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/#comments Mon, 21 Apr 2008 16:44:33 +0000 Tee++; http://www.jquerytips.com/2008/04/21/events-after-ajax-request-not-working/ ผ่านพ้นสงกรานต์ไปแล้วก็หวังว่าทุกคนคงยังสบายดีกันอยู่นะครับ ไม่ใช่ไปเมาตกน้ำแถวไหน อิอิ (ล้อเล่นนะครับ) ตัวผมเองก็ห่างหายจากการอัพเดทบล๊อกไปนานทีเดียว วันนี้ก็เลยจะมาพูดถึงปัญหาสำคัญที่หลายๆ คนมักตั้งข้อสงสัยกันว่า

“ทำไม event ต่างๆที่เขียนในรูปแบบของ jQuery จึงไม่ทำงานหลังจาก ajax call ?”

เช่นสมมุติเราเขียน function ให้ทำงานตามนี้

  1. $(‘a.doajax’).click(function() { alert(‘I am a link’); });

จากนั้นเีรามี ajax request ไปที่ไฟล์ more.html ซึ่งหลังจากเรารับค่ามาแล้ว พอดีในไฟล์นี้มี tag a.doajax อยู่ด้วย แต่มันจะไม่สามารถทำงานได้ เพราะว่าคำสั่งที่เราเขียนว่าจะทำงาน at time ที่มันโหลดเท่านั้น ไม่ทำงานต่อในกรณีเราใช้งาน ajax call ซึ่งเราสามารถแก้ไขปัญหาได้แบบนี้

  1. <script language="javascript">
  2. $(document).ready(function() {
  3.   var bindBehaviors = function() {
  4.     $(‘a.doajax’).click(function() {
  5.       alert(‘I am a link’);
  6.     });
  7.   }
  8.  
  9.   bindBehaviors
  10.  
  11.   $(‘a.ajaxRequest’).click(function() {
  12.     $(‘#somediv’).hide().load(‘more.html’, function() {
  13.       bindBehaviors
  14.       $(this).fadeIn();
  15.     });
  16.   });
  17. });
  18. </script>

วิธีการนี้เป็นการเตรียม function ไว้ก่อน ซึ่งตอน load เราก็เรียกมา 1 ที หลังจาก ajax call เราก็เรียกมาอีก 1 ทีเพื่อให้ tag a.doajax ที่อาจจะมีใน more.html รับฟังมันไปอีกที ไม่ยากใช่มั้ยครับ

ซึ่งนอกจากวิธีนี้ ก็ยังมี นักพัฒนาหลายคนที่เขียน plugin ไว้แก้ปัญหานี้ด้วยเช่น

Live Query
Intercept

สำหรับวันนี้พอแค่นี้ละครับ หอมปากหอมคอ เดี๋ยวเร็วๆนี้จะนำเรื่องที่น่าสนใจกว่านี้มาอัพให้ครับ

]]> http://www.jquerytips.com/2008/04/21/events-after-ajax-requested-not-working/feed/ 1 จับ Events ตรงๆเหรอ เค้าเลิกแล้ว http://www.jquerytips.com/2007/10/23/events-in-jquery/ http://www.jquerytips.com/2007/10/23/events-in-jquery/#comments Mon, 22 Oct 2007 18:38:07 +0000 Tee++; http://www.jquerytips.com/2007/10/23/%e0%b8%88%e0%b8%b1%e0%b8%9a-events-%e0%b9%80%e0%b8%ab%e0%b8%a3%e0%b8%ad-%e0%b9%80%e0%b8%84%e0%b9%89%e0%b8%b2%e0%b9%80%e0%b8%a5%e0%b8%b4%e0%b8%81%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7/ ซึ่งลองมาดูกันตามหลัก SEO จะเห็นว่า SE มองที่ # และก็ไม่สามารถไปต่อตาม link ที่เรากำหนดไป เพราะมันไม่สน onclick ซึ่งเป็น event ใน [...]]]> หลายๆ ท่านที่เขียน JavaScript คงจะเคยชินกับการจับ Events ต่างๆ เช่น onclick, onblur, onkeyup, onkeydown, etc. ซึ่งตัวผมเองคิดว่าไอ้พวกนี้มันไม่มีผลดีต่อ SEO นัก เพราะ SE ไม่มองอยู่แล้ว จรืงมั้ย ?

แต่ว่าพอเปลี่ยนมาเป็น jQuery ล่ะ ไม่ต้องจับ Events พวกนี้เหรอ ปล่าวครับ ก็ยังจับเหมือนเดิมเพียงแต่ว่า ไม่ได้จับตรงๆ แต่ใช้การดัก Event จากตำแหน่งของ เอกสาร (DOM)

มันเป็นยังไงน่ะเหรอ เอ้าลองมาดูกัน….

สมมุติผมจะเขียน onclick ตามปกติของ JavaScript ผมก็จะเขียนแบบนี้
Go to Google< /a>

ซึ่งลองมาดูกันตามหลัก SEO จะเห็นว่า SE มองที่ # และก็ไม่สามารถไปต่อตาม link ที่เรากำหนดไป เพราะมันไม่สน onclick ซึ่งเป็น event ใน JavaScript อยู่แล้ว

แต่ถ้าเราเปลี่ยนเป็น jQuery ล่ะ ?
Go to Google< /a>

อยากให้ทุกคนอย่าเพิ่งมองมันเป็น link ธรรมดานะครับ คือแค่ยกตัวอย่า บางที่มันอาจจะเป็น link ajax หรือ อะไรสักอย่างก็ได้ แต่ผมขี้เกียจเขียนตัวอย่างยาวๆอ่ะ -*-

แล้วเขียน jQuery ดังนี้
$(function() {
$("#mylink").click(function() {
var target = $(this).attr('href');
location.href = target;
return false;
});
});

เห็นมั้ยครับ เราสามารถเรียกค่า รวมถึงจับ Events ได้โดยการดักจาก หน้าเอกสารเลยไม่ต้องเขียนตรงๆ แถมยังได้คะแนน จาก SE ไปเต็มๆ

เอาล่ะครับก่อนจะต่อบทความใหม่ผมอยากให้คนที่สนใจไปศึกษาเรื่อง Events เพิ่มเติมก่อนจาก link ด้านล่างกันก่อน
http://docs.jquery.com/Events

บทความหน้าจะเป็นเรื่องเกี่ยวกับ selector ครับ ต้องบอกไว้เลยว่าไม่ง่ายนัก แต่ว่าทำงานได้หลากหลายมากๆ สามารถเลือกทุกสิ่งทุกอย่าจากหน้าเอกสารได้เลย รับรอง เจ๋ง !

]]> http://www.jquerytips.com/2007/10/23/events-in-jquery/feed/ 4