Articles → JQUERY → Adding events to html elements using jquery

Adding events to html elements using jquery




Introduction





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>





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>





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>





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>






<!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>




<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>





Posted By  -  Karan Gupta
 
Posted On  -  Friday, November 04, 2011

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250