Question

我的HTML代码非常简单：

<a id="trigger-overlay" class="nav-toggle2" href="#">Contact Us</a>

和js是：

$(".nav-toggle2").click(function() {
    alert('gdsgdsfgs');
});

点击链接时，为什么我没有看到任何提醒消息？

我的小提琴就在这里：http://jsfiddle.net/jfwerce1/

Answer 1

您发布的JavaScript实际上并不是纯粹的（＆＃34; vanilla＆＃34;）JavaScript。语法类似于jQuery，它是一个JavaScript库，通过在旧浏览器中提供更一致的体验并为常见范例提供更简单的语法，您可以更轻松地编写事件驱动的JavaScript。

jQuery很棒，但只有包含库文件才有效。 This page讨论了几种方法。在jsFiddle上，您实际上只需更改左上角框架和扩展中的下拉列表即可。类别并自动包含最新版本的jQuery。

下面的代码片段显示了您可能用于在个人网站上包含jQuery的脚本标记。

＆＃13;

$(".nav-toggle2").click(function() {
    alert('gdsgdsfgs');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="trigger-overlay" class="nav-toggle2" href="#">Contact Us</a>

＆＃13;

导入像jQuery这样的大型库会稍微减慢页面的加载时间，有时候会有点过分。对于更简单的任务，您可能更喜欢用纯JavaScript编写代码，以便可以避免加载jQuery库。

你没有尝试做的任务可以在没有jQuery的情况下完成。

＆＃13;

document.getElementById('trigger-overlay').addEventListener('click', function() {
  alert('gdsgdsfgs');
});

＆＃13;

<a id="trigger-overlay" class="nav-toggle2" href="#">Contact Us</a>

＆＃13;

将来请注意，您可以使用JavaScript控制台诊断代码中的问题。访问此控制台的区别在于浏览器到浏览器（在大多数浏览器中，您可以按 F12 来访问开发人员工具，这些工具通常在最底部的窗格中有一个JavaScript控制台）。查看它将在执行代码时显示错误消息和警告。例如，您的代码会显示错误，例如＆＃34;＆＃39; $＆＃39;不是一个定义的功能。＆＃34;如果在没有jQuery库的情况下执行。

Answer 2

这里是加载了jQuery库的代码： https://jsfiddle.net/jfwerce1/1/

它与：

相同

<a id="trigger-overlay" class="nav-toggle2" href="#" onclick="alert('gdsgdsfgs');">Contact Us</a>

Answer 3

从jquery.com获取jQuery库的副本，并在结束</body>标记之前包含它。

或者只是放置它：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

就在同一个地方。

您也可以将其放在<head>中，但通常只需要在</body>之前加入。

Answer 4

其他答案建议您导入jQuery（这将修复您的代码）。但是，如果您的页面确实非常简单，那么您也可以保持这种方式。

您可以使用vanilla javascript修改代码，只需将onclick事件添加到锚点并创建一个函数来代替当前脚本。

doSomething = function() {
    alert('gdsgdsfgs');
};

<a id="trigger-overlay" class="nav-toggle2" href="#" onclick="doSomething();">Contact Us</a>

Updated fiddle

Answer 5

你正在使用一个名为＆＃34; jQuery＆＃34;这是臃肿，低效和不必要的。如果您的工作是维护已有10年历史的应用程序，那么了解jQuery可能会很有用，但我们现在拥有更好的工具。将代码重写为

function onclick() { alert('gdsgdsfgs'); }

var elt = document.getElementById('trigger-overlay');
elt.addEventListener('click', onclick);

但等一下。这似乎比jQuery等价物多得多！不是jQuery让我在一行中做同样的事情吗？是的，这是jQuery的可卡因上瘾性质。但是我们可以很容易地编写自己的实用程序例程，例如

function listen(id, event, handler) {
  document.getElementById(id) .  addEventListener(event, handler);
}

一旦我写完了，我只需要

listen('trigger-overlay', 'click', onclick);

看，它比jQuery更短。

但是，嘿 - 我真的很喜欢那些美元符号！你能给我一些吗？当然，一个人的价格怎么样？我们来定义

function $$click(id, handler) {
  document.getElementById(id) . addEventLister('click', handler);
}

现在我可以写一个更短的方式！

$$click('trigger-overlay', onclick);

如何在点击超链接时调用警报？

5 个答案: