call the same jQuery function in multiple buttons

Question

I am not really familiar with jQuery. I have this code that I downloaded to create a fade in/fade out popup form. Here's the code:

<script type='text/javascript'>
    $(document).ready(function() {
        $('#button').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fade',
                animationspeed: 150,
                closeonbackgroundclick: true, 
                dismissmodalclass: 'close'
            });
            return false;
        });
    });
</script>

The code above executes when a button with an id='button' is clicked. Now I have multiple buttons, how can I call this function in all buttons? I tried setting the id of all buttons to button but only the first button works. Any help would be very much appreciated. By the way I forgot to mention, in my .php file i have this codes:

for ($c=1;$c<=5;$c++){
echo "<input type='button' id='button'">
};

This php code will display 5 buttons with the same id which is 'button'. What I want to happen is when I click any of the 5 buttons the jQuery function will execute which is popping up a fade in/fade out form.

Answer 1

First solution :

function doClick(e) { 
   $('#modal').reveal({ 
     animation: 'fade',
     animationspeed: 150,
     closeonbackgroundclick: true, 
     dismissmodalclass: 'close'
   });
   return false;
}
$('#button1').click(doClick);
$('#button2').click(doClick);

Second solution :

Give a class "someClass" to all the involved buttons

<input type=button class=someClass ...

and do

$('.someClass').click(function(e) { 
...
});

Third solution :

Use the comma to separate ids :

$('#button1, #button2').click(function(e) { 
...
});

---

Generally, the best solution is the second one : it allows you to add buttons in your code without modifying the javascript part. If you add some of those buttons dynamically, you may even do

$(document).on('click', '.someClass', function(e) { 
...
});

Answer 2

Use different ids for buttons and change your function as below.

$('#button1, #button2, #button3').click(function(e) {
.....

Answer 3

IDs should be unique. Try using something like

$('input[type="button"]')

Answer 4

you class can call them by class you using , seperated id

$(document).ready(function() {
$('#button, #button1, #button2').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});​

Answer 5

<script type='text/javascript'>
$(document).ready(function() {
$('#button1,#button2,#button3').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});
</script>

or else use class as mentioned bt dystroy

Answer 6

You can use css class name instead of id to achieve it like below

<script type='text/javascript'>
$(document).ready(function() {
    $('.fade').click(function(e) { 
        $('#modal').reveal({ 
            animation: 'fade',
            animationspeed: 150,
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close'
        });
        return false;
    });
});
</script>

and your html of the buttons

<button class="fade">Button1</button>
<button class="fade">Button2</button>
<button class="fade">Button3</button>

Answer 7

如果你对所有按钮都使用相同的buttonid，则不需要调用所有按钮..只需使用此代码..似乎你在这段代码中使用动画....好用togglefade而不是透露

<script type=text/javascript> $(document).ready(function(){ $("button").click(function(){ $("#buttonid").fadein(); $("#buttonid").fadeout(); }); }); </script>

Answer 8

Create an array for unique buttonid dynamically in the loop like

$button[] = '#'.$buttonid; 

Outside the loop use implode to convert this array to comma separated string

$jsstring = implode(",",$button);

Now use php to pass above string as selector in your js code like:

$(document).ready(function() {
    $('< php echo $jsstring ; ?>').click(function(){ });
});

Answer 9

To use the easier simple ways as following code :

Method 1:

 <script> $(document).ready(function () { $('input:button[name="button1"],[name="button2"]').click( function () { alert('test') }); }); </script> <input type="button" id="button1" name="button1" value="Filter" /> <input type="button" id="button2" name="button2" value="Filter" /> 

Method 2:

 <script> $(document).ready(function () { $('button[id="button1"],[id="button2"]').click( function () { alert('te2222st') }); }); </script> <button id="button1" >bbbbb</button> <button id="button2" >bbbbb</button> 

Answer 10

I have solution for this problem

      $(document).ready(function () {
                    $("#btnSubmit,#btnSubmitbuttom").click(function () {
                        var rfp = true;
                        var count = 0;
                        var lbxBD_Role = $("#lbxBD_Role option:selected").val();
                        if (lbxBD_Role == "" || lbxBD_Role == undefined) {
                            $("#lblBD_Role").attr("style", "visibility: visible");
                            $("#lblBD_Role").attr("style", "color: red");
                            $("#lblBD_Role").html('* Required');
                            count++;
                        }
                      });
                   });
            </script>