การใช้งาน live และ die ใน jQuery 1.4

18 June 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

jquery live

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery live

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

ใน 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>

อ่านเพิ่มเติม
https://api.jquery.com/

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