Menu
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.
380
To call a function on button click, you can use the click () of jQuery to trigger click when someone clicks on the button. Inside the function, you have to specify the created function to call it on click. See the example given below to learn the method. alert('An alert message on button click with click ().');
To trigger the same function with multiple events, use the jQuery on () method with multiple events such as click, dblclick, mouse enter, mouse leave, hover, etc. You can try to run the following code to learn how to work the same function with jQuery multiple events:
The code gets executed automatically when someone clicks on the button. alert('This is an alert message.'); Click below button to get alert message using jQuery function call. The above example contains the function and the click event.
You need to first find at which event you want to execute the code. Here, you have to create a function and call that function when someone clicks on the button. You just need to put the created function in the click event. The code gets executed automatically when someone clicks on the button.
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) {
...
});
Use different ids for buttons and change your function as below.
$('#button1, #button2, #button3').click(function(e) {
.....
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
