CSS conditional selector either this or that - css

Question

currently i have something like this
$("#foo").click(function () {callMe();});
$("#bar").click(function () {callMe();});
foo and bar do the same thing. Is there a way for me to define a selector saying either if foo id or bar id is called then trigger the click event ? I tried this but it did not work
$("#foo","#bar").click(function () {callMe();});

Answer 1

you could give them a class and then check the id of the target element:
$('').on('click', function(e) {
if (e.currentTarget.id === 'foo') {
console.log('foo clicked');
} else {
console.log('bar clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click" id="foo">foo</div>
<div class="click" id="bar">bar</div>
Or if I'm misunderstanding the question and you just want to select both elements using their ids, you can just use
$('#foo,#bar').on('click', function() {});
note the comma is in the quotes, not separate quotes

Answer 2

The syntax and the code looks fine, I think you haven't imported jQuery properly.
I tried the same, and it works fine. Have a look at the code below.
function callMe () {
alert("callMe function called!");
}
$("#foo, #bar").click(function () {callMe();});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="foo"> foo </button>
<button id="bar"> bar </button>

Answer 3

document.getElementById("demo").addEventListener("click", callMe);
function callMe(e) {
let id = e.target.id
console.log(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
<button id="foo">Foo</button>
<br> <br>
<button id="bar">bar</button>
</div>