การใช้งาน live และ die ใน jQuery 1.4
18 June 2010 By Ninenik Narkdeelive jquery
ใน 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
