Lets, there are three elements where I called myFunc(); like this way:
$('table').on('click', 'a', function() {
myFunc();
});
$('.myClass').on('hover', 'p', function() {
myFunc();
});
$('select').on('change', function() {
myFunc();
});
Is there a way to join all the handlers for all multiple selectors to execute a same function so that I will be able to call myFunc(); once instead of three times?
Nope, not really. However, to get a cleaner code, you should go with:
$('table').on('click', 'a', myFunc());
$('.myClass').on('hover', 'p', myFunc());
$('select').on('change', myFunc());
For the same event, you can use multiple selectors but for the different event, you have to use a different selector, though you could use the first approach but click will trigger before change event.
$('table a, .myClass p, select').on('click change', function() {
myFunc();
});
$('select').on('change', function() {
myFunc();
});
function myFunc(){
console.log('clicked')
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th><a>head</a></th></tr>
</table>
<div class="myClass"><p>My Class</p></div>
<select>
<option>1</option>
<option>2</option>
</select>
$('table').on('click', 'a', function() {
myFunc("a");
});
$(".myClass").hover(function() {
myFunc("p");
});
$('select').on('change', function() {
myFunc("select");
});
var myFunc = function(type) {
console.log(type, "tag called");
};table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Example Table</h2>
<table>
<tr>
<th>A Tag</th>
<th>P Tag</th>
<th>Select Tag</th>
</tr>
<tr>
<td><a href="javascript:void(0)">Alfreds Futterkiste</a></td>
<td>
<p class="myClass">Maria Anders</p>
</td>
<td>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</table>You can build your events :)
let myFuncObjects = {
'table': Array(
'click',
'a'
),
'.myClass': Array(
'hover',
'p'
),
'select' : Array(
'change'
),
};
function buildEvent(myFuncObjects){
for (var key in myFuncObjects) {
let childSel = myFuncObjects[key][1] ? myFuncObjects[key][1]+', ': '';
$(key).on(myFuncObjects[key][0], childSel, function(){
myFunc();
})
}
}
buildEvent(myFuncObjects);