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){
});
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:
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() {
});
});
:) cool if you dont do same thing then think of putting common functionality in one function and call it from different click event, for the other question look in here for the ID vs Class answer - stackoverflow.com/questions/5029254/…:):) you could attach click event separately if every click has separate functionality, also you can try submitting code in stack-code review if you further need code review, also what you are trying to do is correct, but you might end up with many if else condition which personally I don't like, you can also look for switch hope it helps bruv, :)Certainly the first approach as it promotes the greatest code reuse (since you needn't repeat the body of the function for each selector) and is therefore the simplest to maintain.
As a rule of thumb, you should only break your code out into separate functions when the function body will be different.
There is no realistic limitation on the number of selectors that you may use, so that shouldn't be a consideration.
Of course, a better choice would be to apply a single class and base your selector on that class:
$(function() {
$(".myClass").on('click', function() {
//do something
});
});
The best choice, would be to apply a single class, limited by a context (due to the inefficiency of selecting on only a class):
$(function() {
$(".link", "#context").on('click', function() {
//do something
});
});
I agree with your A method,
why you not to use jquery selector? if you have a same function for each item, you can use jquery selector and give a same class name in each item and the code should be like this:
<script>
$(document).ready(function(){
$(".item").click(function(){
#your code here...
})
})
</script>
other way, you can make some function and you just send a parameter to your function, so your code more less and efficient. Did i wrong?
