为什么超链接上的click事件没有被触发？
[英]Why is the click event on a hyperlink not being triggered?
问题描述
Why is the click event on a hyperlink not fired? 
为什么超链接上的click事件未被触发？
@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. myDiv click事件按预期触发，但privacyLink的事件未被触发，即未显示警报。
Generated HTML: 生成的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 个解决方案
解决方案1
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: 除了你应该从你的锚的点击回调中返回false以防止浏览器重定向以外的事实我没有看到它有什么问题：
$('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. 还要确保在DOM中的任何位置都没有id="privacyLink"其他元素，因为ID必须是唯一的。
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. 还要在浏览器中检查您的js控制台，以确保您没有一些javascript错误，导致无法正确附加.click处理程序。
解决方案2
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/ 使用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) 这是模拟你的条件的jsfiddle（动态生成HTML元素）
http://jsfiddle.net/nhNpw/6/
解决方案3
0 2013-03-03 17:43:01
Try with event preventDefault() method. 尝试使用事件的preventDefault()方法。
$('a#privacyLink').click(function (e) {
e.preventDefault();
alert('a');
$(location).attr('href', $(this).attr('href'));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.