Why is the click event on a hyperlink not being triggered?
Question
Why is the click event on a hyperlink not fired?
@Html.ActionLink(
"Show the privacy policy",
"PrivacyPolicy",
null,
new { id = "privacyLink" })
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function () {
alert('a');
});
});
</script>
The myDiv click event is fired as expected but the privacyLink 's event is not fired, that is the alert is not shown.
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/AjaxDemo.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</nav>
</header>
<section id="main">
<h2>Welcome to ASP.NET MVC!</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<div id="myDiv">
<p>
Me Gusta
</p>
</div>
<a href="/Home/PrivacyPolicy" id="privacyLink">Show the privacy policy</a>
<div id="privacy"></div>
<script>
$(document).ready(function () {
// $('div').addClass('fooh');
$('div#myDiv').click(function () {
alert('div was clicked');
});
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).src = $(this).attr('href');
});
});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
3 answers
solution1
3 2013-03-03 17:39:36
Other than the fact that you should return false from the click callback of your anchor to prevent the browser from redirecting away I do not see anything wrong with it:
$('a#privacyLink').click(function () {
alert('a');
return false;
});
Also make sure that you do not have other elements with id="privacyLink" anywhere in your DOM because ids must be unique.
Also check your js console in the browser to ensure that you do not have some javascript errors preventing the .click handler to be attached properly.
solution2
0 2013-03-03 17:39:46
Use this : Since your anchor is not formed , your binding is not working. Use http://api.jquery.com/on/
$("a#privacyLink").on("click", function(event){
alert('a');
});
This is the jsfiddle to simulate your condition (Dynamic generation of HTML elements)
http://jsfiddle.net/nhNpw/6/
solution3
0 2013-03-03 17:43:01
Try with event preventDefault() method.
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).attr('href', $(this).attr('href'));
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.