Question

I’m wondering which approach is better and why: A) One document on click with many selectors, B) multiple document on clicks.

Also is there a limit on selectors for A? Thanks.

A)

$(document).on('click', '#a, #b, #c, #d, #e', function(e){

});

vs

B)

$(document).on('click', '#a', function(e){

});


$(document).on('click', '#b', function(e){

});

$(document).on('click', '#c', function(e){

});

$(document).on('click', '#d', function(e){

});

$(document).on('click', '#e', function(e){

});

Answer 1

Option A is called multiple selector approach http://api.jquery.com/multiple-selector/ – Selects the combined results of all the specified selectors

You can specify any number of selectors to combine into a single
result. This multiple expression combinator is an efficient way to
select disparate elements. The order of the DOM elements in the
returned jQuery object may not be identical, as they will be in
document order. An alternative to this combinator is the .add()
method.

Performance (Selectors) = id vs class vs tag vs pseudo vs. attribute selectors ==>
http://jsperf.com/id-vs-class-vs-tag-selectors/2

Advantages I see with multiple selector:

• Easy to use
• Write less (Code compactness)
• full YAGNI support if you have same functionality for all the id’s Good read: http://c2.com/cgi/wiki?YouArentGonnaNeedIt

Recommendation

Please think of using class attribute instead of so many id’s if all of them does same thing

Like this

$(function() {
    $(".classname").click(function() {

    });
});​