Javascript/jQuery onclick 不起作用答案

【问题标题】：Javascript/jQuery onclick not workingJavascript/jQuery onclick 不起作用
【发布时间】：2015-10-26 12:28:45
【问题描述】：

我制作了一个 test.html 文档来测试脚本。不知何故，它不起作用，我不明白为什么什么也没发生。脚本在 -tags 中并用 -tag 包装，css 也有它的 -tags。为什么它不应该工作？这是代码

<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script>
        $('#menu li a').on('click', function() {
            $('li a.current').removeClass('current');
            $(this).addClass('current');
        });
        </script>
        <style>
        .current {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }
        </style>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a id="about-link" class="current" href="#">ABOUT</a></li>
                <li><a id="events-link" href="#">EVENTS</a></li>
                <li><a id="reviews-link" href="#">REVIEWS</a></li>
                <li><a id="contact-link" href="#">CONTACT</a></li>
            </ul>
        </div>
    </body>

</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

因为您的绑定事件处理程序代码在元素出现在DOM 之前执行，所以事件没有绑定到元素上。

要解决这个问题，你可以

将您的代码包装在ready() 回调中，以便在DOM 完成加载时执行您的代码
将您的脚本移动到<body> 的末尾，这样所有元素都存在于DOM 中，您可以在其上绑定事件

代码：

$(document).ready(function () {
    $('#menu li a').on('click', function () {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
});

编辑

你也可以使用load(不推荐) 事件回调来绑定事件，但这会等待所有资源加载完毕。

如果你想使用 Vanilla Javascript，你可以在document 上使用DOMContentLoaded 事件。

【讨论】：

注意：bind 的过去式是bound（不是bind）。即“事件未绑定在元素上”
更好。这似乎是 SO 上最常见的语法错误 :) +1 还建议您可以简单地将代码移到元素之后。

【解决方案2】：

您正在加载 DOM 内容之前执行代码。将您的代码放在就绪块中。

【讨论】：

或者只需将代码放在它引用的元素之后...（body 结尾是最常见的地方）

【解决方案3】：

您在加载 <body> 标记之前执行 JavaScript，其中包含您的 <li> 元素。

要解决这个问题，你有三个选择：

1.您可以在$(document).ready() 回调中插入您编写的JavaScript 代码。（更多信息请参见http://www.w3schools.com/jquery/event_ready.asp）

代码：

$(document).ready(function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
});

2.您可以使用JavaScript内置的window.onload函数。（更多信息请参见https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/）

代码：

window.onload = function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
}

3.将您的<script> 标签放在页面中</body> 标签之前。

代码：

<head>
    <style>
    .current {
        text-decoration: underline;
    }

    ul {
        list-style-type: none;
    }

    a {
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a id="about-link" class="current" href="#">ABOUT</a></li>
            <li><a id="events-link" href="#">EVENTS</a></li>
            <li><a id="reviews-link" href="#">REVIEWS</a></li>
            <li><a id="contact-link" href="#">CONTACT</a></li>
        </ul>
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script>
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
    </script>
</body>

注意：使用$(document).ready() 比使用window.onload 更好。（更多信息请参见window.onload vs $(document).ready()）

【讨论】：

【解决方案4】：

您的代码很好。只需将其包装在准备好的 DOM 中即可。

$(document).ready(function(){
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
})

【讨论】：