Articles → JQUERY → Adding events to html elements using jquery

Adding events to html elements using jquery

Introduction

In this article, I will explain how to add events to html elements using Jquery.

Adding click event in anchor tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Adding event in anchor tag demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		            function() {              
		                $("a").click(
		                    function() {
		                        alert("Click and any anchor tag and this pop up will come");
		                    }
		                );
		            }
		        );
	</script>
</head>

<body> <a href="http://www.google.com">google</a>
	<a href="http://www.rediff.com">Rediff</a>
	<a href="http://www.gyansangrah.com">gyansangrah</a> 
</body>

</html>

In the above example, if we click on any of the anchor tags the alert will come. In this example, we have specified $("a").click() to add click event. So, the click event will be added to every anchor tag.

Adding click event to a specific anchor tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Adding event to specific anchor tag demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		            function() {
		        $("a#googleLink").click(
		                    function() {
		                        alert("Click and any anchor tag and this pop up will come");
		                    }
		                );
		            }
		        );
	</script>
</head>

<body> <a href="http://www.google.com" id="googleLink">google</a>
	<a href="http://www.rediff.com">Rediff</a>
	<a href="http://www.gyansangrah.com">gyansangrah</a> 
</body>

</html>

In the example, the above alert event will only fire, when a link with the text "google" is clicked. Here, we have specified $("a#googleLink").click to add click event. As the first link in the example is having the id "googleLink". So, the jquery code will only add the click event to the first link. So, when you click on the second and third link, the page will simply navigate to their respective webpages without prompting the alert message. But in the case of the google link, the first alert message will come and then page will navigate to the respective webpage.

Adding click event on a button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Adding event to a button demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		            function() {
		        $("input").click(
		                    function() {
		                        alert("This alert will come when you click on button");
		                    }
		                );
		            }
		        );
	</script>
</head>

<body>
	<input type="button" value="click me" />
</body>

</html>

Here, we have specified the button as $("input"). So, all the elements starting with the input keyword (like button,textbox, radiobutton, file etc) will prompt an alert message when we click on it. To specify the message only on the button, we can specify "id" on the button and use the same method as we have used in the previous example.

Adding a click event on button inside the div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Adding event to a button inside the div demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		            function() {
		        $("div input").click(
		                    function() {
		                        alert("This alert will come only when the button inside the div is clicked");
		                    }
		                );
		            }
		        );
	</script>
</head>

<body>
	<div>
		<input type="button" value="Button inside the div" />
	</div>
	<input type="button" value="click me" />
</body>

</html>

In the above example, we have added the click event on a button which is inside the div tag. $("div input").click instructs to add an event to a button which is inside the div tag.

If we have 2 div tags, then this code will add the events to both the buttons. To specify a particular div we can use an attribute "id". Please see the example below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Adding event to a button inside the div demo</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		            function() {
		        $("div#mainDiv input").click(
		                    function() {
		                        alert("This alert will come only when the button inside the mainDiv is clicked");
		                    }
		                );
		            }
		        );
	</script>
</head>

<body>
	<div id="mainDiv">
		<input type="button" value="Button inside the  first div" />
	</div>
	<div>
		<input type="button" value="Button inside the second div" />
	</div>
	<input type="button" value="click me" />
</body>

</html>

If we have a situation like this

<li>
	<ul>
		<input type="button" value="List option 1" />
	</ul>
	<ul>
		<input type="button" value="List option 2" />
	</ul>
	<ul>
		<input type="button" value="List option 3" />
	</ul>
</li>

Then you can specify $("li ul input").click to add an event to the button.

Posted By -	Karan Gupta

Posted On -	Friday, November 4, 2011

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250