The live() method

Trong những chương trước, chúng ta đã dùng phương thức bind() và unbind() để gắn và bỏ gắn xử lý sự kiện với nhiều element trong trang. Việc này thật dễ dàng cho những element đã tồn tại nhưng với những sự kiện trong tương lai thì sao? Bằng cách dùng phương thức live() bạn có thể thông báo cho jQuery gắn xử lý sự kiện với các element tương lai phù hợp với selector ban đầu. Để tôi chỉ cho bạn một ví dụ mà chúng ta dùng phương thức bind() và sau đó thay thế chúng với phương thức live():

<div id="divTestArea1">
	<a href="javascript:void(0);" onclick="AddBox();">Add box</a>
	<div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
	$(".test").bind("mouseover", function()
	{
		$(this).css("background-color", "blue");
	}).bind("mouseout", function()
	{
		$(this).css("background-color", "white");
	});
});

function AddBox()
{
	var div = $("<div></div>").addClass("test").text("Another box");
	$("#divTestArea1").append(div);
}
</script>

Ví dụ trên có vẻ phức tạp, nhưng thực tế là không. Để tôi chỉ cho các bạn. Chúng ta có đường dẫn, trong đó gọi phương thức JavaScript là AddBox(), và sau đó chúng ta có thẻ div với class là "test". Phương thức AddBox() sẽ tạo thêm một thẻ div khác trong trang, với cùng class khi bạn bấm vào đường dẫn, với nội dung Another box. Trong sự kiện, chúng ta chọn toàn bộ element có class test và sau đó chúng ta điều khiển sự kiện: lúc di chuột và lúc không di chuột, chúng ta thay đổi màu sắc của sự kiện sẽ điều khiển sự kiện. Thử ví dụ trong trình duyệt của bạn. Thẻ div đầu tiên sẽ có sự thay đổi nhưng các thẻ div tiếp theo thì khồn, lý do rất đơn giản: Chúng ta gắn sự kiện trước khi box mới được thêm vào.

Giờ chúng ta sẽ thay đổi một chút. Chúng ta đổi hai phương thức bind() bằng phương thức live():

<div id="divTestArea2">
	<a href="javascript:void(0);" onclick="AddBox();">Add box</a>
	<div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
	$(".test").live("mouseover", function()
	{
		$(this).css("background-color", "blue");
	}).live("mouseout", function()
	{
		$(this).css("background-color", "white");
	});
});

function AddBox()
{
	var div = $("<div></div>").addClass("test").text("Another box");
	$("#divTestArea2").append(div);
}
</script>

Vậy nếu bạn chạy ví dụ này, bạn sẽ thấy rằng khi bạn thêm các thành phần mới vào trong trang, jQuery sẽ tự động gắn các sự kiện vào cho bạn. Phương thức live() làm việc giống bind() vì vậy hãy xem lại bind() ở chương trước. Tương tự với phương thức die() sẽ giống phương thức unbind() nhưng nên dùng khi mà live() đã được thực hiện.