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/
-
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– Kevin2013-07-18 05:51:52 +00:00Commented Jul 18, 2013 at 5:51
-
I want to use var objects only... selectors are to be of var type onlyuser321963– user3219632013-07-18 05:52:12 +00:00Commented Jul 18, 2013 at 5:52
-
You could also just state: var b1 = "b1", b2 = "b2"; and then use $(b1,b2).bind()...Kevin– Kevin2013-07-18 05:54:03 +00:00Commented Jul 18, 2013 at 5:54
-
Hi kevin.. $(b1,b2) or $([b1],[b2]) is not workinguser321963– user3219632013-07-18 05:58:25 +00:00Commented Jul 18, 2013 at 5:58
-
My bad, use: var b1 = "#b1", b2 = "#b2";Kevin– Kevin2013-07-18 06:02:14 +00:00Commented Jul 18, 2013 at 6:02
|
Show 1 more comment
5 Answers
you can use .add()
b1.add(b2).add(b3).click(function(){
})
Demo: Fiddle
or use multiple selector
$('#b1, #b2, #b3').click(function(){
})
Demo: Fiddle
Comments
I would highly suggest making the button click function a separate function and then bind each button to it
$(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:
<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 Comment
seveninstl
While Arun's answer works, using the class instead of ids what the best answer for my situation. Thanks.
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
});
Comments
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/.
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 :)
