jQuery .click() event
Syntax and Description
.click(handler)
.click()
handler is a function to execute each time the event is triggered.
Return value is the jQuery object, for chaining purposes.
jQuery clear event binds an event handler to the click JavaScript event, or trigger that event on an element.
.click(handler) is a shortcut for .bind('click', handler). .click() is a shortcut for .trigger('click').
We can trigger the event when a different element is clicked.
$('#other').click(function() {
$('#target').click();
});
The following code listens to a click event and displays the tag name and then stops it.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w. ja v a 2s. c o m-->
$("#container").click(function (e) {
alert(e.target.tagName);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
<p>java2s.com</p>
</div>
</body>
</html>
anchor click event
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<!--from ww w . j av a 2 s. c o m-->
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<a href="http://java2s.com/">java2s.com</a>
</body>
</html>
Add click listener to links in unordered list
The following code adds click listener to links in unordered list.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<!--from ww w .j a v a 2s. c o m-->
<script type='text/javascript'>
var tmpExample = {
ready : function() {
$('ul#myStyle li a').click(
function($e) {
$e.preventDefault();
window.open(this.href, 'FavoriteLink', '');
}
);
}
};
$(document).ready(tmpExample.ready);
</script>
<style type='text/css'>
ul {
list-stlye: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<ul id='myStyle'>
<li><a href='http://www.java2s.com'>java2s</a></li>
<li><a href='http://www.apple.com'>Apple</a></li>
<li><a href='http://www.jquery.com'>jQuery</a></li>
</ul>
</body>
</html>