Binding same function to different elements in jquery

Question

The following code won't work if i replace id with variable. I tried different combination but didn't work. I am using on form elements. Please let me know if anyone knows how to get this work. Thanks.

This works:

$('#Button1, #Button2').click(function() {
// 
});

Here is my sample code that doesn't work:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>                    <script>    
    $(document).ready(function(){
   var Btn1 = $("#buy");
       var Btn2 = $("#preview");        
   $(Btn1, Btn2).click(function(){ console.log("hey");})        
});

</script>
</head>
<body>
  <form>
      <input type="button" value="Preview" id="preview" />
      <input type="button" value="Buy" id="buy" />
  </form>

</body>
</html>

Side note: you should indent your code properly if you don't want to get lost in a labyrinth of jQuery chained methods. — Álvaro González
– Álvaro González, Commented Dec 30, 2011 at 11:27

Ufuk Hacıoğulları · Accepted Answer · 2011-12-30 12:07:53Z

2

You can concat jQuery elements and assign click function on both.

Btn1.add(Btn2).click(function(){ 
    console.log("hey");
});

Better solution would be giving some class to buttons then assigning click on them:

$('.myButton').click(function() { 
    console.log("hey");
});

edited Dec 30, 2011 at 12:07

answered Dec 30, 2011 at 11:12

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

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

Comments

paulcol. · Accepted Answer · 2011-12-30 11:15:28Z

1

You can also separate the function from the event binding. This can a powerful technique for more advance uses.

var my_func = function(){ console.log("hey");}

$("#buy").click(my_func);
$("#preview").click(my_func);

answered Dec 30, 2011 at 11:15

paulcol.

3,0081 gold badge23 silver badges19 bronze badges

Comments

Umesh Patil · Accepted Answer · 2011-12-30 11:24:45Z

1

Comments

Bas Wildeboer · Accepted Answer · 2011-12-30 11:41:35Z

1

You are putting your jquery elements in separate variables and are using these in your function call. The comma will not act as expected in your solution. You can use the selector like this $('#buy, #preview'). Your JS code would then look like this:

    $(document).ready(function(){
       $('#buy, #preview').click(function(){ console.log("hey");})        
    });

answered Dec 30, 2011 at 11:41

Bas Wildeboer

5806 silver badges13 bronze badges

Collectives™ on Stack Overflow

Binding same function to different elements in jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related