การใช้งาน live และ die ใน jQuery 1.4
18 June 2010ใน jQuery เวอร์ชั่น 1.4 มี event ที่ชื่อ live และ die ที่ทำให้เราสามารถกำหนด หรือยกเลิก event ต่างๆ ให้กับ elements ที่ถูกดึงมาแสดงด้วย ajax หรือที่เรียกว่าข้อมูลจาก xhr ได้
ดูตัวอย่างประกอบ
div id=i_content
div id=i_debug
เมื่อเราคลิกที่ div id=i_content สีเหลืองอ่อน
ก็จะมีการนำ span id=i_span สีฟ้า และข้อความว่า message มาแสดงใน div สีเหลืองอ่อน
ด้วยคำสั่ง
$("#i_content").click(function(){
var xhrData = "<span id='i_span'>message</span>"
$("#i_content").html(xhrData);
});
ถ้าเราต้องการเรียก span id=i_span สีฟ้า นั้นมาใช้งานอีกที เช่น ต้องการนำข้อความใน span id=i_span สีฟ้า มาแสดงใน div id=i_debug สีแดงอ่อน
ด้วยคำสั่งข้างล่าง ต่อไปนี้ ไม่สามารถทำได้
$("span#i_span").click(function(){
$("#i_debug").html($("span#i_span").html());
});
แต่ด้วยคุณสมบัติของ event live ของ jQuery 1.4 สามารถทำได้
ด้วยคำสั่งต่อไปนี้
$("span#i_span").live('click',function(){
$("#i_debug").html($("span#i_span").html());
});
และสามารถยกเลิกความสามารถนี้ด้วย die event
ด้วยคำสั่งต่อไปนี้
$("span#i_span").die('click');
โค้ดตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery get object from ajax</title>
<style type="text/css">
#i_content{
background-color:#FFC;
width:200px;
height:35px;
display:block;
}
#i_debug{
background-color:#FCC;
width:200px;
height:35px;
display:block;
}
#i_span{
background-color:#6CF;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#i_content").click(function(){
var xhrData = "<span id='i_span'>message</span>"
$("#i_content").html(xhrData);
});
$("span#i_span").click(function(){
$("#i_debug").html("I click the span id i_span");
});
$("#cancel_live").click(function(){
$("span#i_span").die('click');
$("#i_debug").html("");
});
$("#use_live").click(function(){
$("span#i_span").live('click',function(){
$("#i_debug").html($("span#i_span").html());
});
});
});
</script>
div id=i_content
<br />
<div id="i_content"></div>
<br />
div id=i_debug
<br />
<div id="i_debug"></div>
<br />
<button id="use_live">Use live() event</button>
<button id="cancel_live">Use die() event</button>
</body>
</html>
อ่านเพิ่มเติม
http://www.ninenik.com/jquery-manual/api/live.html
http://www.ninenik.com/jquery-manual/api/die.html
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5555 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4586 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 1205 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2549 25 Dec 10 แนวทาง การใช้งาน php กับ css กำหนด รูปแบบ style อย่างง่าย อ่าน 1837 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 5204 06 Aug 10 ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์ อ่าน 2430 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 5992 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3213 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4329 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 3920 17 Mar 09 ง่ายๆ กับการส่งค่าตัวแปร PHP ไปใช้ใน Javascript อ่าน 5271 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 4510 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1816 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 3433 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 7130 25 Sep 08 Jquery javascript library มาแรง อ่าน 6344 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 924 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5559 13 Oct 08 คำสั่ง SQL LIKE อ่าน 4447