当前位置: 首页 > 面试题库 >

Javascript / jQuery onclick无法正常工作

古起运
2023-03-14
问题内容

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

问题答案:

由于用于绑定事件处理程序的代码是在元素存在于中之前执行的DOM,因此事件未绑定到元素上。

要解决此问题,您可以

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

码:

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

编辑

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

如果您想使用Vanilla
Javascript,可以DOMContentLoaded在上使用event document



 类似资料:
  • 问题内容: 为什么会获得以下JavaScript代码? 问题答案: 此时,您正在调用函数,页面的其余部分尚未呈现,因此该元素当时不存在。尝试调用您的函数。像这样:

  • 问题内容: 因此,我的设置无法按我想要的方式工作。因此,每当我运行该程序时,它就会立即从0变为100。我尝试使用,任务,并尝试了,但没有任何尝试。 这是我的程序: @MadProgrammer这是我尝试做一名摆动工作人员并将每个名称写入文档并更新进度栏的尝试。该程序将达到86%左右并停止运行,永远不会创建完成的文档。该程序将创建一个空白文档。这是我首先创建的SwingWorker对象,这是两种方法

  • 问题内容: 我在JLayeredpane上有两个JPanels。其中一个显示pdf,重叠的一个具有透明背景(我使用过setOpaque(false))。现在,我可以将图形添加到透明面板中,这样看来我实际上是在注释pdf。我想要一个橡皮擦工具来删除这些注释。我尝试使用以下代码 其中path是由多条线构成的形状。现在,不是在先前的图形上绘制 透明线 ,而是绘制 黑线 。我要去哪里错了? 问题答案: 请

  • 问题内容: 这看起来有效,但无法正常工作。我希望菜单悬停时’huh’div不透明。我尝试了淡入/淡出效果,但效果很好,但只有一次很奇怪。 问题答案: 不带点使用:

  • 问题内容: 我正在编辑从tesseract ocr获得的一些电子邮件。 这是我的代码: 但是输出不正确。 输入: 输出: 但是,当我在每次替换后将结果分配给新的String时,它都能正常工作。为什么在同一字符串中连续分配不起作用? 问题答案: 您将在Javadoc中的String.replaceAll()中注意到,第一个参数是正则表达式。 句点()和管道()以及花括号()都有特殊的含义。您需要对它

  • 问题内容: 我正在编写3D绘画,但在Java中发现了问题。在代码的一部分中,它起作用了: 在另一种情况下,它不起作用: 你能告诉我如何使它工作吗?谢谢在我问之前,是的,它确实执行了那部分代码。 编辑: 哦,现在工作正常,谢谢 问题答案: 代替: