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. In this article I will create different examples to elaborate the concept.

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 example above if we click on any of the anchor tag 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 above alert event will fire only when link with the text "google" is clicked. In this example 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 second and third link the page will simply navigate to their respective webpages without prompting the alert message. But in case of google link 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 starts with input keyword (like button,textbox, radiobutton, file etc) will prompt the alert message when we click on it. To specify the message only on 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 example above we have added the click event on a button which is inside the div tag. $("div input").click specifies that add an event to a button which is inside the div tag.

If we have 2 div tags then this code will add events to both the buttons. To specify a particular div we can use 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 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 event to the button.

Posted By -	Karan Gupta

Posted On -	Friday, November 04, 2011

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250