21

I have 3 buttons b1, b2, b3. How to bind click on 3 buttons. Var b1 = $("#b1"); Var b2 = $("#b2");

$(b1,b2).bind("click", function(){});

jsfiddle.net/Xqpaq/

6
  • Your code is incorrect, you cannot use a jQuery selector on a comma separated jQuery selections. If you want to do this, use an array notation like: $([b1, b2])
    – Kevin
    Jul 18, 2013 at 5:51
  • I want to use var objects only... selectors are to be of var type only
    – user321963
    Jul 18, 2013 at 5:52
  • You could also just state: var b1 = "b1", b2 = "b2"; and then use $(b1,b2).bind()...
    – Kevin
    Jul 18, 2013 at 5:54
  • Hi kevin.. $(b1,b2) or $([b1],[b2]) is not working
    – user321963
    Jul 18, 2013 at 5:58
  • My bad, use: var b1 = "#b1", b2 = "#b2";
    – Kevin
    Jul 18, 2013 at 6:02

5 Answers 5

33

you can use .add()

b1.add(b2).add(b3).click(function(){
})

Demo: Fiddle

or use multiple selector

$('#b1, #b2, #b3').click(function(){
})

Demo: Fiddle

16

I would highly suggest making the button click function a separate function and then bind each button to it

http://jsfiddle.net/Xqpaq/1/

$(document).ready(function(){ 

     var b1 = $("#btn1");
     var b2 = $("#btn2");
     var b3 = $("#btn3");

    var btnClick = function(e){
        alert("Button: "+e.currentTarget.id);
    }

    b1.on('click', btnClick);
    b2.on('click', btnClick);
    b3.on('click', btnClick);

});

The alternative is to use classes instead of ids. Like so:

http://jsfiddle.net/Xqpaq/2/

<input type="button" id="btn1" class="btn-click-action" value="submit"/>
<input type="button" id="btn2" class="btn-click-action" value="submit2"/>
<input type="button" id="btn3" class="btn-click-action" value="submit3"/>

Then JS:

var btnClassClick = function(e){
    alert("Button clicked from class: "+e.currentTarget.id);
}

$('.btn-click-action').on('click', btnClassClick);
1
  • While Arun's answer works, using the class instead of ids what the best answer for my situation. Thanks.
    – seveninstl
    Jan 29, 2019 at 21:01
9

wrap them in a div then target the div for all the button elements.

<div id="button-nav">
    <button class="button" type="button">button 1</button>
    <button class="button" type="button">button 2</button>
    <button class="button" type="button">button 3</button>
</div>

the js:

$('#button-nav').on('click','button', function (evt) {
   //-- do stuff
});

JS Fiddle of the above

7

Giving jQuery an array will combine each item into a bigger jQuery object, thus you can bind your events in one shot.

Assume b1 and b2 is DOM element, not jQuery object.

$([b1, b2]).click(function (evt) { 
     // your code goes here 
});

JSFiddler at http://jsfiddle.net/XF3Vv/1/.

2
  • Could someone post a fiddle to this? I can't get it to work, but it seems really cool
    – user1234
    Jul 18, 2013 at 5:50
  • 2
    My bad, b1 and b2 should be DOM elements, not jQuery objects. I thought jQuery object should usually prefixed with $.
    – Compulim
    Jul 18, 2013 at 6:08
5

in your case:

just simply do like this below:

cj('#b1, #b2').click(function(){

        alert('you clicked either button 1 or button 2');

});

typical example: do some thing like this for different elements, if you click on any of these elements then this click event will be triggered

cj('#_qf_Contact_upload_view-top, #_qf_Contact_upload_new-top, ,#_qf_Contact_upload_view-bottom, #_qf_Contact_upload_new-bottom').click(function(){
    console.log(cj('#first_name').val());
    if(cj('#first_name').val() == '' || cj('#first_name').val().length == 0)
     {
        alert('First Name is a required field, cannot be empty');
        return false;
    }
});

hope it helps some one :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.