JQuery click event on 1000 divs, optimize approach?

Question

I am building a system for selling event tickets. Right now there are about 1000 different places to choose from among visitors. Maby will one day be up to 5000.

Right now I have a div for each place and then some jQuery to reserve a place using ajax. So meens, that I have about 1000 divs and my jQuery selector is more disturbing, sets a click event for each div.

Is there a better approach to this?

I want to call ajax when I click div, and not on page reload.

Answer 1

Use . delegate () :

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

, div.

Answer 2

jQuery:

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

Answer 3

" ", .. click , div, div, 1000 . div, , "", .

Answer 4

, . jQuery . live() () http://api.jquery.com/delegate/, .

, , , DOM . , .

Answer 5

You might want to check out this SO stream, this might be useful for you. It's hard to say from your post, but an image map may be an option for you in this case. Using jQuery hover with HTML image map