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>