Sự kiện nhấp chuột jQuery trên 1000 div, tối ưu hóa phương pháp tiếp cận?

Question

Tôi đang xây dựng một hệ thống bán vé cho các sự kiện. Ngay bây giờ có khoảng 1000 chỗ ngồi khác nhau để chọn làm khách truy cập. Một ngày nào đó nó sẽ lên đến 5000.

Bây giờ tôi có một div cho mỗi điểm và sau đó một số jQuery để đặt chỗ tại chỗ với ajax. Vì vậy, mà meens rằng tôi có khoảng 1000 divs và nhiều hơn nữa đáng báo động jQuery selector của tôi đặt một sự kiện click trên mỗi div.

Có cách tiếp cận tốt hơn về điều này không?

Tôi muốn kích hoạt ajax khi nhấn div, không tải lại trang.

Answer 1

Sử dụng .delegate():

$("#container").delegate(".child", "click", function(){ 
    alert("Clicked!"); 
}); 

Bằng cách này bạn sẽ làm cho chỉ là một sự kiện để quản lý tất cả các divs.

Answer 2

Sử dụng "ủy quyền sự kiện", tức là ràng buộc sự kiện nhấp một lần, không phải với từng div riêng lẻ mà đến div bao quanh 1.000 div của bạn. Trong trình xử lý, bạn có thể truy xuất phần tử cho div đã được nhấp, thông qua đối tượng "event" được truyền vào trình xử lý của bạn.

Answer 3

chỉ cần sử dụng jQuery phương pháp đoàn:

$('.theater').delegate('.seat','click',function(event){ 
    var self = $(event.target); 
    console.log(self); 
    // self is the '.seat' element that has been clicked. 
}); 

Answer 4

Bạn có thể muốn kiểm tra này thread SO, nó có thể hữu ích cho bạn. Từ bài viết của bạn thật khó để nói, nhưng một bản đồ hình ảnh có thể là một lựa chọn cho bạn trong trường hợp này. Using JQuery hover with HTML image map

Answer 5

Cách tiếp cận này được gọi là ủy quyền sự kiện và như Ash đã giải thích. jQuery có một vài phương pháp để trợ giúp ở đây. live() và đại biểu mới hơn() http://api.jquery.com/delegate/ chính xác hơn một chút.

Vì vậy, bạn ràng buộc một sự kiện nhấp chuột vào một yếu tố là minh bạch của tất cả các div bạn quan tâm và nhấp chuột lên chúng sẽ tạo DOM sẽ được cha mẹ chụp. Tại thời điểm đó bạn có thể làm những gì bạn cần.