Articles → JQUERY → Adding Events To Html Elements Using Jquery

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





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 4, 2011

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250