Which button is clicked using jQuery
For some times, you may have requirement like you have to find out which button is clicked. In your webpage you have several buttons, based on button id you have to execute different functions.
In normal javascript, you have to assign onclick event for every button. But jQuery provides us simple way to fulfill this type of requirement.
Here I am explaining how to find out which is clicked using jQuery.
<html>
<head>
<title> identify which button is clicked </title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// $('#btn1').bind('click', function() {
// alert('You selected the First Button');
// });
// $('#btn2').bind('click', function() {
// alert('You selected the Second Button');
// });
// $('input[type="button"]').click(function() {
// alert('You selected the ' + $(this).val());
// });
$('input[type="button"]').click(function(event) {
var $target = $(event.target);
if ($target.is('#btn1')) {
alert('You selected the First Button');
}
if ($target.is('#btn2')) {
alert('You selected the Second Button');
}
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="First Button" />
<input type="button" id="btn2" value="Second Button" />
</body>
</html>
In the above example we used the different methods to find out which button is clicked. I will explain one by one below.
$('#btn1').bind('click', function() {
alert('You selected the First Button');
});
$('#btn2').bind('click', function() {
alert('You selected the Second Button');
});
In the above code, we are using the jQuery bind() method to find out the button click event. jQuery bind() method attaches the specific event to the given element.
Syntax of the jQuery bind() method:
element.bind(eventType, data,event handler)
Where
eventType: It specifies the type of the event like click, double-click, focus or blur... etc.
data: The data to be passed to the event handler for processing. If it is not specified, the event handler function can be used as second argument.
event handler: The function that executes whenever given event occurred.
Here we are attaching the click event to the buttons btn1, btn2 and in the event handler function we are using alert. We omitted the "data" parameter, so event handler is the second parameter.
We have to attache bind() method for each element, if we are using button id to identify the element. In the below example we are going to use the type of the element to identify the element whenever it is clicked.
$('input[type="button"]').click(function() {
alert('You selected the ' + $(this).val());
});
In the above code we are using the "input type" to identify the element. Here we attach the click event for every element whose input type is "button".
jQuery provides us some other way also to identify the element, that is "target". In the below we are using the target to identify the element.
$('input[type="button"]').click(function(event) {
var $target = $(event.target);
if ($target.is('#btn1')) {
alert('You selected the First Button');
}
if ($target.is('#btn2')) {
alert('You selected the Second Button');
}
});
var $target = $(event.target); will return identity of the element on which event is fired. Based on this identity we can execute different functions.
Download source code: jQuery_button_click.zip (35.81 kb)
