CODEWITHSUNDEEP
jquery
user1896653
user1896653

Reputation: 3327

How to execute same function for multiple event handlers on multiple selectors?

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?

Upvotes: 2

Views: 507

Answers (4)

Roman Panevnyk
Roman Panevnyk

Reputation: 313

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);

Upvotes: 0

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3238

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>

Upvotes: 2

ankitkanojia
ankitkanojia

Reputation: 3122

$('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>

Upvotes: 1

Sunday Johnson
Sunday Johnson

Reputation: 102

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());

Upvotes: 4

Related Questions