Question

当我点击任何li项目时，此代码中的click事件不希望触发，为什么会这样？

<!DOCTYPE HTML>
<html>
<head>
    <!-- begin CSS -->
    <!--<link href="css/style.css" type="text/css" rel="stylesheet">
    <link href="css/html5-reset.css" type="text/css" rel="stylesheet">-->
    <!-- end CSS -->

    <!-- begin JS -->
    <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <!--<script src="js/modernizr-2.0.6.min.js" type="text/javascript"></script>-->
    <script src="js/myscript.js" type="text/javascript"></script>
    <!-- end JS -->

    <title>Navigation Menu</title>
</head>

<body style="background: url(images/bgnoise_lg.png) repeat left top;">
<!-- begin container -->
<div id="container" style="width: 600px; margin: 280px auto 0;">

    <!-- begin navigation -->
    <nav id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!-- end navigation -->

</div>
<!-- end container -->

</body>
</html>

myscript.js位于文件夹js：

下

$('#navigation li a').click(function() {
    alert($(this).text());
});

我尝试了jsfiddle中的代码，当我在index.html页面中编写脚本时它也可以工作，但是当我尝试链接到js / myscript.js时它不起作用!!

Answer 1

您需要在文档准备就绪时运行脚本，或者您可以在标记关闭html正文之前移动脚本（即：</body>）

另一种可能性是使用附加到document（始终存在）的事件委托：

    $(document).on('click', '#navigation li a', function(e) {
        alert($(this).text());
    });

$(function () { // document ready
  $('#navigation li a').click(function() {
    alert($(this).text());
  });
});

<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>

<body style="background: url(images/bgnoise_lg.png) repeat left top;">
<div id="container" style="width: 600px; margin: 280px auto 0;">

    <!-- begin navigation -->
    <nav id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!-- end navigation -->

</div>

为什么点击事件不会触发？

1 个答案: