0

Using JQuery, I have two different events on two different elements, that I want to trigger the same function. Is there some way to combine the two separate statements into one statement -

Example:

$('#element1').on('change', function () {
      myFunction();
});

$('#element2').on('click', function () {
      myFunction();
});

Is there someway to combine these into one statement?

I would like to do something like -

//this does not work
$('#element1','#element2').on('change, click', function () {
      myFunction();
});

NOTE:

  • The event 'change' should ONLY apply to '#element1'

  • The event 'click' should ONLY apply to '#element2'.

  • The event 'change' should NOT apply to '#element2'

  • The event 'click' should NOT apply to '#element1'.

A Bogus
  • 3,852
  • 11
  • 39
  • 58
  • Correct me if I'm wrong, but isn't that exactly what you have in the first code block? – Douwe de Haan Aug 09 '18 at 14:21
  • The first code block in my question has two separate statements, I want to combine them into one, such as in my second code block, but that code does not work. – A Bogus Aug 09 '18 at 14:33
  • You can [bind a function to multiple events](https://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function) and you can [trigger the same function for multiple elements](https://stackoverflow.com/questions/1313373/jquery-same-click-event-for-multiple-elements), so you could put these together with some conditional logic to trigger the appropriate function for each element but it seems like more overhead than just binding the specific event to the element you want to trigger the function for in the first place. – benvc Aug 09 '18 at 14:47
  • It may help if you can you explain the reason for your requirement? Is it purely educational or is there a deeper reasoning? eg is this intended to apply to 1000s of controls? – freedomn-m Aug 09 '18 at 14:47
  • What's your definition of "one statement"? You can use `,` which will still be one statement, eg: your original code as "one statement": `$('#element1').change(myFunction),$('#element2').click(myFunction);` – freedomn-m Aug 09 '18 at 14:51
  • The purpose of this is for "Click a submit button" and "Change a drop down list" should trigger the same function, which is remove a validation error from the screen.. – A Bogus Aug 09 '18 at 15:20

1 Answers1

0

It can be done.

$('#element1, #element2').on('click change', function(event){
    var $this = $(this);
    if (($this.is('#element1') && event.type === 'change') ||  ($this.is('#element2') && event.type === 'click')) {
        myFunction();
    }
});
Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
  • 1
    Yes, this should Work, but I think the oruginal code is more elegant. – Poul Bak Aug 09 '18 at 14:45
  • @PoulBak I totally agree. I don't understand _why_, you would want this, but it can be done and I believe this to be the shortest version. One could also change the first argument of `on` into an object, with the events as keys, but that just gives you basically the same. – Douwe de Haan Aug 09 '18 at 14:58
  • The purpose of this is for "Click a submit button" and "Change a drop down list" should trigger the same function, which is remove a validation error from the screen.. – A Bogus Aug 09 '18 at 15:20