jQuery, Ajax, PHP, JSON, XML, Web Technologies » Events http://blog.chonla.com คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า Thu, 02 Sep 2010 18:43:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery $.ready() กับ window.onload ความเหมือนที่แตกต่าง http://blog.chonla.com/2008/11/jquery-ready-%e0%b8%81%e0%b8%b1%e0%b8%9a-windowonload-%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%95/ http://blog.chonla.com/2008/11/jquery-ready-%e0%b8%81%e0%b8%b1%e0%b8%9a-windowonload-%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%95/#comments Thu, 06 Nov 2008 04:09:58 +0000 chonla http://blog.chonla.com/?p=115 คงมีหลายคนไม่น้อยที่เคยใช้การสั่งให้ฟังก์ชั่นทำงานตอน document โหลดเสร็จ ไม่ว่าจะเป็นการใช้ onload event ใน <body> หรือจะเป็นการกำหนดค่าใน window.onload event ของ javascript

เมื่อมองถึง jQuery แล้ว jQuery มี function ที่ทดแทน (ที่ดีกว่า ผมเชื่ออย่างนั้น) คือ ready() ซึ่งทำงานใกล้เคียงกัน

การใช้ $.ready() หรือ $() หรือ $(document).ready() จะเกิดขึ้นเมื่อ document ถูกโหลดและ parse เป็น DOM สำเร็จ เรียกง่าย ๆ ว่า ทำเมื่อ document ถูกโหลดแล้วนั่นเอง เราสามารถใช้ $() แทนการเขียนรูปแบบอื่น ๆ ได้ เพื่อให้สั้นและกระชับ และฟังก์ชั่นนี้เองที่เราจะเอามาแทน window.onload

ข้อแตกต่างระหว่าง $() และ window.onload อย่างหนึ่งที่เห็นได้ชัดคือ รูปแบบการทำงานของฟังก์ชั่นที่เอามาผูกด้วย

ผมหมายถึงถ้ามีการเรียก window.onload = <ชื่อฟังก์ชั่น> หลายครั้ง จะถือว่าการ bind ครั้งสุดท้าย เป็นฟังก์ชั่นที่จะถูกทำงานเมื่อ document ถูกโหลดแล้ว ในขณะที่ $(<ชื่อฟังก์ชั่น>) ถ้าถูกเรียกหลายครั้ง จะเป็นการสั่งให้ทำงานตามลำดับการเรียก หลังจากที่ document ถูกโหลดเสร็จ

และเพื่อให้เห็นภาพได้ชัดเจนขึ้น ลองไปดูได้ที่ LIVE DEMO ได้เลยครับ

ข้อห้ามอย่างหนึ่งคือในการใช้ $() คือ ห้ามมีการกำหนด window.onload หรือ onload ใน <body> อยู่ด้วยกันกับ $() ไม่งั้นแล้ว ฟังก์ชั่นที่ผูกกับ $() จะไม่ทำงานครับ

สิ่งที่สำคัญอีกเรื่อง ซึ่งผมเคยพูดไปในบทความก่อน ๆ แล้ว คือ การเรียก element ที่ยังไม่ถูกโหลด หรือยังไม่มีอยู่จริงใน DOM ใน javascript การเรียกใช้ element นั้น ๆ ใน window.onload หรือ $() จะสามารถแก้ปัญหานี้ได้ครับ

Share/Bookmark

]]> http://blog.chonla.com/2008/11/jquery-ready-%e0%b8%81%e0%b8%b1%e0%b8%9a-windowonload-%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%95/feed/ 6 Event Binding อย่างไรให้ใช้ได้จริง http://blog.chonla.com/2008/10/event-binding-%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b9%84%e0%b8%a3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%84%e0%b8%94%e0%b9%89%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87/ http://blog.chonla.com/2008/10/event-binding-%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b9%84%e0%b8%a3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%84%e0%b8%94%e0%b9%89%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87/#comments Tue, 28 Oct 2008 10:01:51 +0000 chonla http://blog.chonla.com/?p=63 ผมขออนญาตนำคำถามจากเมลของสมาชิก jQuery [THAI] ท่านหนึ่งมาเล่าให้ฟังเป็นกรณีศึกษานะครับ เนื้อหาของจดหมายพอสรุปได้คร่าว ๆ คือ ใน code มีการ bind event ไว้ และมีการสร้าง element ตอน runtime ในลักษณะนี้ (ผมไม่ได้ใช้ code ที่สมาชิกส่งมาให้ แต่เขียน code ขึ้นใหม่ เพื่อให้ดูง่ายขึ้นนะครับ)

ในส่วนของการ binding คือ

$("input[type=button]").click(function(){ alert("Hello world"); });    //  (1)

และในส่วนของการสร้าง element ตอน runtime คือ

$("#container").html("<input type='button' value='Click me'>");    // (2)

ปัญหาของกรณีนี้คือ การวางลำดับคำสั่งผิดครับ ลองนึกดูว่า ถ้าเรามีการเรียก code ส่วนที่ (1) ก่อน แล้วค่อยสร้าง element ในส่วน (2) สิ่งที่เกิดจาก (1) คือ มีการ bind event click ให้กับ $(“input[type=button]“) ไปแล้วครับ ในขณะที่ element นั้นยังไม่มีอยู่จริงในเว็บ ทำให้ปุ่มที่สร้างขึ้นมาใหม่ไม่ถูก bind ไปด้วยครับ

ปัญหานี้ทำให้ผมนึกถึงอีกกรณีศึกษาหนึ่งครับ ลองดู code ตามนี้ครับ

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> sample </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("input[type=button]").click(function(){alert("Hello world");})
</script>
</head>

<body>
<input type="button" value="click me">

</body>
</html>

ดูเผิน ๆ อาจจะไม่เห็นอะไรผิดปกติ แต่พิจารณาดูดี ๆ แล้ว คำสั่ง $(“input[type=button]“).click(function(){alert(“Hello world”);}) มันถูกสั่งให้ทำตั้งแต่โหลดหน้า page ยังไม่เสร็จ แน่นอน มันก็จะยังไม่รู้จักกับ <input type=”button” value=”click me”> เลยครับ ทำให้การ bind event ในลักษณะนี้ไม่เป็นผลเช่นกัน

การ bind event จะต้องเกิดหลังจากที่ element นั้นมีอยู่แล้ว ถึงจะใช้งานได้ครับ ในกรณีศึกษาแรก ผมได้แนะนำให้ไปเรียก binding หลังจากที่สร้าง element แืทน ส่วนกรณีหลัง ผมแนะนำให้ไปไว้ใน $.ready() ครับ

ลองไปดูตัวอย่างได้ใน LIVE DEMO ครับ

Share/Bookmark

]]> http://blog.chonla.com/2008/10/event-binding-%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b9%84%e0%b8%a3%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b9%84%e0%b8%94%e0%b9%89%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87/feed/ 6