为什么没有触发超链接上的点击事件？答案

【问题标题】：Why is the click event on a hyperlink not being triggered?为什么没有触发超链接上的点击事件？
【发布时间】：2013-03-03 17:33:48
【问题描述】：

为什么没有触发超链接上的点击事件？

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

myDiv click 事件按预期触发，但privacyLink 的事件未触发，即未显示警报。

生成的 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>

【问题讨论】：

点击链接会发生什么？
有两种可能性浮现在脑海中：您的 DOM 中有多个带有 id="privacyLink" 的元素，或者您有一些 javascript 错误阻止点击处理程序被附加（查看您的 js控制台）。
您能否发布通过浏览器浏览源代码所看到的生成的 HTML？这可能有助于理解问题，因为我们将拥有允许重现问题的完整标记。
你发布的 html - 如果我忽略你的 AJAX 脚本和modernizr-1.7.min.js - 点击工作正常
它也适用于我。我在jsfiddle 的脚本标签中粘贴了body 标签和javascript 之间的html。当然不包括那些其他的js文件。

标签： javascript jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

除了您应该从锚点的点击回调中返回 false 以防止浏览器重定向之外，我认为它没有任何问题：

$('a#privacyLink').click(function () {
    alert('a');
    return false;
});

还要确保在 DOM 中的任何位置都没有带有 id="privacyLink" 的其他元素，因为 id 必须是唯一的。

还要在浏览器中检查您的 js 控制台，以确保您没有一些 javascript 错误阻止正确附加 .click 处理程序。

【讨论】：

【解决方案2】：

尝试使用事件preventDefault() 方法。

$('a#privacyLink').click(function (e) {
  e.preventDefault();
  alert('a');
  $(location).attr('href', $(this).attr('href'));
});

【讨论】：

@Md.ArafatAlMahmud 你有$('a').click(...的警报吗？

【解决方案3】：

使用这个：由于您的锚未形成，因此您的绑定不起作用。使用http://api.jquery.com/on/

  $("a#privacyLink").on("click", function(event){
     alert('a');
  });

这是模拟您的条件的 jsfiddle（HTML 元素的动态生成）

  http://jsfiddle.net/nhNpw/6/

【讨论】：

Since your anchor is not formed 是什么意思？锚点就在他的标记中。
我不知道 ASP 。但似乎他是在客户端动态创建它
这和他现在拥有的没什么不同。
锚点是使用 Html.ActionLink 帮助器在服务器端创建的。如果这是例如加载 AJAX 的局部视图中的代码，那么您的答案将是正确的。但这并不能解释为什么点击 div 有效。
如果问题是在绑定时锚点还不存在，那么这仍然无济于事。它需要类似于$(document.body).on('click', '#privacyLink', function() { alert('a'); });。