How to use single click event for multiple button id in jquery

Question

Here I am having two buttons with id frm_submit1 and frm_submit2

<button type="button" id="frm_submit1">Click Me 1!</button>
<button type="button" id="frm_submit2">Click Me 2!</button>

In jquery, I need to do same onclick event for both the buttons. For one button (frm_submit1) click, I used like below. How can I use for multiple buttons?

$(document).on('click', '#frm_submit1', function(event) {
});

I used this, but didn't worked! Any idea?

$("#frm_submit1, #frm_submit2").click(function (e) {  
// do something  
});

With the selector $("#frm_submit1, #frm_submit2"), you achieved the objective of attaching the same onclick handler to the two buttons. So what is it that still doesn't work? — Roamer-1888
– Roamer-1888, Commented Nov 18, 2014 at 15:19
This will work. But, I don't know the reason. I think problem with my code. Let me check. I am using onsenui Framework. So all the pages will be stored in a stack. So that might be a problem — UI_Dev
– UI_Dev, Commented Nov 18, 2014 at 15:22
onsenui is pretty arcane. You'll need to provide a link and include the onsen-ui tag. — Roamer-1888
– Roamer-1888, Commented Nov 18, 2014 at 15:26

j08691 · Accepted Answer · 2014-11-18 15:10:42Z

6

Just separate the IDs by a comma:

$(document).on('click', '#frm_submit1, #frm_submit2', function(event) {
});

jsFiddle example

answered Nov 18, 2014 at 15:10

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

j08691 Over a year ago

@NicholasKyriakides - Perhaps they're added dynamically to the page.

user2952238 Over a year ago

@NicholasKyriakides Yes, why?

Viktor Over a year ago

I'd prefer using a class as one single selector

Phil Over a year ago

This is a bad answer because it does not explain why this would work... it has nothing to do with IDs being separated by commas. And this is placing the listener on the document something that should be placed on the closest static parent -1

j08691 Over a year ago

@Phil - First off, not a bad answer. I simply re-used the example the OP posted which he said worked for a single element, and extended it. While I agree with you that document is a worst case selector, the OP has provided no other details.

|

Jordan · Accepted Answer · 2014-11-18 15:17:23Z

1

It's better for this case to use class :

$(".classForButtons").click(function () {  
        // do something  
   });

answered Nov 18, 2014 at 15:17

Jordan

792 bronze badges

Comments

user2952238 · Accepted Answer · 2014-11-18 15:11:38Z

-3

Try to use the button element as the selector instead. That will run on click on all buttons. Best would be do declare a class on the buttons that you want to use it on and then use the class as the selector instead.

$("button").click(function (e) {  
    // do something  
});

answered Nov 18, 2014 at 15:11

user2952238

7872 gold badges14 silver badges37 bronze badges

6 Comments

nicholaswmin Over a year ago

are you talking seriously?

UI_Dev Over a year ago

what is this? Mr.user2952238

user2952238 Over a year ago

Yes, why? This buttons could be added to the DOM dynamically or whatever. That info is not provided. ALSO: "Best would be do declare a class on the buttons that you want to use it on and then use the class as the selector instead."

nicholaswmin Over a year ago

So, if they are dynamically added, does attaching a click handler to do just one specific thing, to all buttons on the page solve the problem? You need some revision

HoangHieu Over a year ago

so in html page are many button added, your code has been add event to all button in page, it's unnecessary..

|

Collectives™ on Stack Overflow

How to use single click event for multiple button id in jquery

3 Answers 3

8 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related