Javascript/jQuery onclick不起作用

Question

Javascript/jQuery onclick不起作用

我制作了一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tus*_*har 12

因为绑定事件处理程序的代码是在元素存在之前执行的DOM,所以事件不会绑定在元素上.

要解决这个问题,你可以

将代码包装在ready()回调中,以便DOM在加载完成后执行代码
将脚本移动到末尾<body>,因此所有元素都存在DOM,您可以绑定它上面的事件

码:

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

Run Code Online (Sandbox Code Playgroud)

编辑

您还可以使用load(不推荐)事件回调来绑定事件,但这将等待所有资源完全加载.

如果你想使用Vanilla Javascript,你可以使用DOMContentLoaded事件document.

Answer 2

ati*_*der 8

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

归档时间：	10 年，3 月前
查看次数：	2762 次
最近记录：	10 年，1 月前