Having two class names in a jquery click function
click, jquery
Solution
jQuery selectors follow CSS rules, so if you want to target an element with two classes, don't use a space between the class names, like this:
$('#rotation')
.on('click', '.btn1.process1', fn)
.on('click', '.btn1.process2', fn);
Alternatively you can have a single click handler and use `hasClass` to identify the button clicked:
$('#rotation').on('click', '.btn1', function() {
if ($(this).hasClass('process1')) {
// do something
}
else if ($(this).hasClass('process2')) {
// do something else
}
})
Problem
I'm using the class btn1 to control the display of some buttons. I have a click function set up that works fine ``` $('#rotation').on('click', '.btn1'... ``` This calls the same click function for all btn1 buttons. I'm trying to figure out how to have the same display class, but call different functions for each button eg ``` $('#rotation').on('click', '.btn1 process1'... ``` when this is clicked ``` <div class="btn1 process1"> ``` and ``` $('#rotation').on('click', '.btn1 process2'... ``` when this is clicked ``` <div class="btn1 process2"> ``` They aren't working. Is it possible to do, or do I need to set up IDs for each button, and set the click functions to listen for the IDs and not class? Thanks for your time and help.