Say I have:
var varOne = $('#varOne'),
varTwo = $('#varTwo'),
varThree = $('#varThree');
How do I use all three or two in one line like:
(varOne, varTwo, varThree).on('click', function(){
// code here
})
4 Answers
Create a new jQuery object with elements added to the set of matched elements.
var combinedElements = varOne.add(varTwo).add(varThree);
combinedElements.on("click", function() {
});
Or
var combinedElements = $.fn.add.call(varOne, varTwo, varThree);
combinedElements.on("click", function() {
});
Example:
var varOne = $("#varOne"),
varTwo = $("#varTwo"),
varThree = $("#varThree"),
combinedElements = varOne.add(varTwo).add(varThree);
combinedElements.on('click', function(){
console.log($(this).html());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="varOne">div1</div>
<div id="varTwo">div2</div>
<div id="varThree">div3</div>2 Comments
Racil Hilan
Cool! I don't think I would ever want to do that in a real project, but it's always good to think out-of-the-box :). If you want to answer the question strictly in the same style (i.e. one line), you could do
$.fn.add.call(varOne, varTwo, varThree).on() :).
Keith
Yeah I like this. I name my selectors so this is what I need, though I do the other answer above sometimes.
Convert your anonymous function to a named one and call it from the three events:
varOne.on('click', myClickEvent);
varTwo.on('click', myClickEvent);
varThree.on('click', myClickEvent);
function myClickEvent() {
// code here
}
Alternatively, if you're only using your variables for the sake of creating the event, then you don't need them and you can use the IDs directly:
$("#varOne", "#varTwo", "#varThree").on('click', function(){
// code here
});
Notice the semicolon at the end. Although optional, it is strongly recommended to use semicolons appropriately.
4 Comments
Andreas
How will a named function help in this case?
Racil Hilan
@Andreas The named function is the standard way of reusing a function in different locations (in this case 3 different events). Is that really something I need to explain? The second solution is exactly the same as what you also recommended in your comment. If you don't think it will work, then why did you recommend it?
Andreas
"How do I use all three or two in one line like: (varOne, varTwo, varThree).on(...)" - How will a named function solve this problem?
Racil Hilan
Ah, I see. When the OP ask for a solution and provides an attempt like that, the strict answer to the question is you cannot. You cannot use more than one variable comma separated to add an event listener. There will a number of different ways to achieve the goal. Depending on the rest of code which we don't see, one solution could be better than the others. Only the OP can decide that, but from the question perspective, all solutions than can do the job are valid answers. The OP will mark the one that is finally used as an answer.
Attach your event-handler to multiple selectors at-a-time
$("#varOne, #varTwo, #varThree").on('click', function(){
// code here
});
Working Example:-
$(document).ready(function(){
var varOne = $('#varOne');
varTwo = $('#varTwo');
varThree = $('#varThree');
$("#varOne, #varTwo, #varThree").on('click', function(){
console.log($(this).html());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="varOne">div1</div>
<div id="varTwo">div2</div>
<div id="varThree">div3</div>
answered Dec 30, 2017 at 16:11
Death-is-the-real-truth
72.3k10 gold badges59 silver badges106 bronze badges
Comments
You should use DELEGATION.
If your 3 selectors share a parent, you can add the event listener to that parent ONE TIME and ask i to listen for any of those three elements.
$.on('click','put, selectors, here', function(){ ... })
1 Comment
Racil Hilan
you should use? Why, because you said so? Consider adding a explanation why you think the OP should use delegation, otherwise consider changing it to you can use.
$("#varOne, #varTwo, #varThree").on(...)