Giả sử chúng ta muốn dùng các mục từ trong từ điển để quyết định n hoặc hiện định nghĩa của từ đó, khi người dùng nhấp chuột vào từ thì nó sẽ n hoặc hiện định nghĩa đi kèm với nó. Với những kỹ thuật ta đã học, thì để làm được việc này rất đơn giản
$(document).ready(function() { $('.term').click(function() {
$(this).siblings('.definition').slideToggle(); });
});
Khi mục từ bị nhấp chuột, jQuery sẽ tìm phần tử là “anh em họ” của nó mà có class là „definition‟, và trượt nó lên trên hoặc xuống dưới.
Mọi việc nghe có vẻ đúng, nhưng khi ta nhấp chuột vào thì sẽ không xảy ra việc gì. Vấn đề là mục từ chưa được thêm vào tài liệu khi ta gán bộ xử lý sự kiện. Cho dù ta có thể gán được bộ xử lý click vào các phần tử này, một khi mình nhấp chuột vào một chữ cái khác thì bộ xử lý sẽ không còn được gán cho nó nữa.
Đây là vấn đề thường thấy trong phạm vi của trang được đưa vào bởi AJAX. Một giải pháp thông thường là chúng ta sẽ gán lại bộ xử lý m i khi vùng của trang được refresh. Nhưng cách này cũng hơi mất thời gian bởi vì đoạn mã gán sự kiện phải được gọi m i khi có một thành phần nào làm thay đổi cấu trúc DOM của trang.
Một cách thay thế hay nhất cho vấn đề này được giới thiệu ở chương : Chúng ta có thể áp dụng ủy thác sự kiện ở đây, bằng cách gắn sự kiện cho thành phần bố m và đây là những thành phần sẽ không bao giờ thay đổi. Trong trường hợp này, chúng ta sẽ gán bộ xử lý sự kiện nhấp chuột vào tài liệu sử dụng phương thức .live()
33 www.izwebz.com Demon Warlock $('.term').live('click', function() { $('.term').live('click', function() {
$(this).siblings('.definition').slideToggle(); });
});
Phương thức .live() sẽ hướng dẫn cho trình duyệt quan sát tất cả những cú nhấp chuột trên toàn bộ trang web, và chỉ khi một phần tử phù hợp với bộ chọn .term, thì bộ xử lý sự kiện mới thực hiện. Bây giờ phương thức .slideToggle() sẽ hoạt động dưới bất kỳ term nào, cho dù nó được thêm vào sau này bởi một giao tác AJAX