Sử dụng live() - lợi ích - tương tự như bind()

Question

Tôi đã thực hiện một số đọc trên sự kiện trực tiếp jquery và tôi vẫn còn bối rối? Lợi ích của việc sử dụng nó là gì?

http://docs.jquery.com/Events/live

Tôi biết nó là tương tự để ràng buộc nhưng cả hai trong những sự kiện vẫn dường như tắt với tôi.

Chỉ cần tìm một số gợi ý.

Answer 1

Cảnh báo: Câu trả lời này cũ. Vẫn rất hữu ích, nhưng live đã không được dùng nữa và bị xóa trong các phiên bản mới hơn của jQuery. Vì vậy, đọc câu trả lời, bởi vì các trường hợp sử dụng đã không thay đổi, và bạn sẽ tìm hiểu lý do tại sao và khi nào sử dụng trình xử lý sự kiện ít hơn. Nhưng trừ khi bạn vẫn đang sử dụng phiên bản jQuery cũ (v1.4.2 hoặc trước đây), bạn nên cân nhắc viết mã tương đương mới thay thế.Theo tài liệu trong số jQuery API for live và được sao chép tại đây:

Viết lại phương pháp .live() về thành công của nó là đơn giản; đây là những mẫu cho các cuộc gọi tương đương cho tất cả các phương pháp tập tin đính kèm ba sự kiện:

1. $(selector).live(events, data, handler); // jQuery 1.3+
2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
3. $(document).on(events, selector, data, handler); // jQuery 1.7+

Đôi khi bạn có một tập hợp các yếu tố khi tải trang, như, giả sử, chỉnh sửa các liên kết:

<table> 
    <tr> 
    <td>Item 1</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 2</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
    <td>Item 3</td> 
    <td><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table> 

Bây giờ, có thể bạn có một cái gì đó như thế này với jQuery:

$(document).ready(function() { 
    $('a.edit').click(function() { 
    // do something 
    return false; 
    }); 
}); 

Nhưng nếu bạn thêm một yếu tố mới để bảng này tự động, sau khi trang đã bước đầu nạp?

$('table').append(' 
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr> 
'); 

Khi bạn nhấp vào "Chỉnh sửa" trên mục mới này, sẽ không có gì xảy ra do sự kiện bị ràng buộc khi tải trang. Nhập trực tiếp. Với nó, bạn có thể liên kết sự kiện trên như thế này:

$(document).ready(function() { 
    $('a.edit').live('click', function() { 
    // do something 
    return false; 
    }); 
}); 

Bây giờ nếu bạn thêm bất kỳ <a> yếu tố mới với một lớp edit sau khi trang đã bước đầu được nạp, nó vẫn sẽ đăng ký xử lý sự kiện này.

Nhưng cách thực hiện điều này?

jQuery sử dụng những gì được gọi là ủy quyền sự kiện để đạt được chức năng này. Sự kiện đoàn là hữu ích trong tình huống này hoặc khi bạn muốn tải một số lượng lớn các trình xử lý. Giả sử bạn có một DIV với hình ảnh:

<div id="container"> 
    <img src="happy.jpg"> 
    <img src="sad.jpg"> 
    <img src="laugh.jpg"> 
    <img src="boring.jpg"> 
</div> 

Nhưng thay vì 4 hình ảnh, bạn có 100, hoặc 200, hoặc 1000. Bạn muốn ràng buộc một sự kiện click vào hình ảnh để hành động X được thực hiện khi người dùng nhấp chuột trên đó. Làm như bạn có thể mong đợi ...

$('#container img').click(function() { 
    // do something 
}); 

... sau đó sẽ ràng buộc hàng trăm trình xử lý tất cả đều làm điều tương tự! Điều này không hiệu quả và có thể dẫn đến hiệu suất chậm trong các ứng dụng web nặng. Với ủy quyền sự kiện, ngay cả khi bạn không lên kế hoạch thêm hình ảnh sau này, việc sử dụng trực tiếp có thể tốt hơn cho loại tình huống này, vì sau đó bạn có thể ràng buộc một trình xử lý vào vùng chứa và kiểm tra thời điểm nó được nhấp nếu mục tiêu là một hình ảnh, và sau đó thực hiện một hành động:

// to achieve the effect without live... 
$('#container').click(function(e) { 
    if($(e.target).is('img')) { 
     performAction(e.target); 
    } 
}); 

// or, with live: 
$('img', '#container').live('click', function() { 
    performAction(this); 
}); 

Kể từ jQuery biết rằng yếu tố mới có thể được thêm vào sau này hoặc thực hiện đó là quan trọng, thay vì ràng buộc một sự kiện với hình ảnh thực tế, nó có thể thêm một đến div như trong ví dụ đầu tiên (trong thực tế, tôi khá chắc chắn nó liên kết chúng với cơ thể nhưng nó có thể vào container trong ví dụ trên) và sau đó ủy quyền. Điều này e.target tài sản có thể cho phép nó kiểm tra sau khi thực tế nếu sự kiện đó đã được nhấp/hành động trên phù hợp với bộ chọn mà bạn có thể đã chỉ định.

Để làm cho nó rõ ràng: điều này là hữu ích không chỉ theo cách trực tiếp của việc không phải rebind sự kiện, nhưng nó có thể nhanh hơn đáng kể cho một số lượng lớn các mặt hàng.

Answer 2

Về cơ bản, với .live() bạn không phải bận tâm việc cập nhật trình xử lý sự kiện nếu bạn có một trang web rất động.

$('.hello').live('click', function() { 
    alert('Hello!'); 
}); 

Đó dụ sẽ ràng buộc các sự kiện click vào bất kỳ yếu tố đó đã có "hello" class cũng như bất kỳ yếu tố đó được tự động chèn, có thể là bởi AJAX hoặc bằng cũ-thời trang JavaScript.

Answer 3

Lợi ích là trình xử lý sự kiện cũng sẽ được thêm vào các yếu tố kết hợp mới khi các yếu tố đó được tạo. Điều này giúp bạn không cần phải thêm trình xử lý sự kiện theo cách thủ công mỗi khi bạn tạo một phần tử mới (khớp với một bộ chọn đã sử dụng trước đó) cần nó.

gia tăng trong jQuery 1.3: liên kết với một handler cho sự kiện (như nhấp chuột) cho tất cả hiện tại - và tương lai - phù hợp phần tử.

Từ http://docs.jquery.com/Events/live#typefn, nhấn mạnh mỏ.