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

Why is the click event on a hyperlink not being triggered?

本文关键字：单击 事件 超链接 为什么      更新时间：2023-09-26

为什么没有触发超链接上的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>

myDiv点击事件按预期触发，但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>

除了你应该从锚点的点击回调返回false以防止浏览器重定向之外，我没有看到任何问题:

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

还要确保在DOM中没有其他具有id="privacyLink"的元素，因为id必须是唯一的。

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

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

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

既然你的锚没有成形，你的捆绑就没有起作用。使用http://api.jquery.com/on/

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

这是模拟你的条件的jsfiddle(动态生成HTML元素)

  http://jsfiddle.net/nhNpw/6/
相关文章：