Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
วันนี้มาแนะนำ plugin ดีๆ อีกตัว…
โปรแกรมเมอร์หลายคนที่เขียน ajax หรือ javascript บ่อยๆ คงเคยเจอปัญหา ว่า javascript ไม่ยอม ทำงานต่อหลังจากที่เรา append DOM ใหม่ๆ ที่มี event เข้ามาด้วย
จริงๆ ผมก็เคยแนะนำวิธีไปคร่าวๆ แล้วเหมือนกัน ใน “วิธีแก้ไขปัญหา events ไม่ทำงานหลังจาก ajax requested”
แต่วันนี้จะมาทำเรื่องง่ายให้เป็นเรื่อง ง่ายเข้าไปอีด้วย plugin ดีๆ ตัวนี้ “livequery”
สมมุติว่าเราเขียน jquery แบบนี้
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<head>
-
<title>jqueryTips.com</title>
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
<script type="text/javascript" src="jquery.js"></script>
-
<script language="JavaScript">
-
<!–
-
$(document).ready(function() {
-
-
$(’ul#container li’).click(function() {
-
$(this).clone().appendTo(’ul#container’);
-
});
-
-
});
-
//–>
-
</script>
-
</head>
-
<body>
-
-
<ul id="container">
-
<li><a href="#">Try me</a></li>
-
</ul>
-
-
</body>
-
</html>
ซึ่งการเขียนแบบนี้ แน่นอนว่า หลังจากที่ มีการ append DOM ขึ้นมาใหม่แล้ว ตัวที่ append ขึ้นมาจะไม่สามารถทำงานต่อไปได้ แต่ถ้าเราเปลี่ยนมาเป็นเขียนโดยใช้ livequery ช่วย แบบนี้
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<head>
-
<title>jqueryTips.com</title>
-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
<script type="text/javascript" src="jquery.js"></script>
-
<script type="text/javascript" src="jquery.livequery.pack.js"></script>
-
<script language="JavaScript">
-
<!–
-
$(document).ready(function() {
-
-
$(’ul#container li’).livequery(’click’, function() {
-
$(this).clone().appendTo(’ul#container’);
-
});
-
-
});
-
//–>
-
</script>
-
</head>
-
<body>
-
-
<ul id="container">
-
<li><a href="#">Try me</a></li>
-
</ul>
-
-
</body>
-
</html>
ปัญหาทุกอย่างก็จะหมดไปทันที ทั้งยังสามารถเอาไปใช้กับ ajax ได้อย่างสบาย ลองดูละกัน ^^
One Response to “livequery ปลั๊กอินที่ ช่วยแก้ปัญหา JS ไม่ยอมเชื่อฟังหลังจาก DOM อัพเดท”
ต้องขอบคุณมากๆครับ สำหรับ plugin ดีๆแบบนี้ เป็นประโยชน์กับผมมากครับ
ฝากเนื้อฝากตัวด้วยครับ มือใหม่หัดโค้ด
By Anan on Sep 30, 2008