Question

我有这段代码：https://jsfiddle.net/g412rft4/1/，你可以看到效果很好。

但是我试图在我的桌面上使用test.html文件和Common.js文件复制它并且它不起作用。似乎Jquery永远不会加载，我不明白为什么。

这是.js文件的代码：

$( "#SaeReplacerBuilder" ).click(function() {
  alert("ok");
});

这是.html文件的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whatever</title>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="Common.js"></script>
</head>

<body>
<div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
</body>
</html>

Answer 1

协议相关链接（以//开头的链接）仅在网页服务器提供网页时才有效。我假设您只是从硬盘驱动器中查看文件。

添加协议，它可以工作：

https://code.jquery.com/jquery-2.1.4.js

如果您显示的是Common.js文件的确切内容，则需要：

a）将代码包装在就绪事件中：

$(function(){
    $( "#SaeReplacerBuilder" ).click(function() {
        alert("ok");
    });
})

b）将您的Common.js脚本移动到页面底部：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Whatever</title>
        <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    </head>
    <body>
        <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
        <script src="Common.js"></script>
    </body>
</html>

否则，您在DOM准备好之前尝试绑定click事件。我通常都这样做（使用ready事件和将脚本移到底部），只是为了安全。

Answer 2

运行Common.js Javascript文件时，文档如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whatever</title>
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="Common.js"></script>

在添加点击处理程序之前，您必须等到文档已完全加载。 jQuery为您提供了一种轻松实现此目的的方法：

$(function () { // This function will be run when the document is done loading
    $( "#SaeReplacerBuilder" ).click(function() {
        alert("ok");
    });
});

此外，将您的Javascript放在HTML代码底部附近通常是个好主意，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Whatever</title>
</head>
<body>
    <div id="SaeReplacerBuilder" style="background-color:#A0A0AA;border-radius:15px;padding-right:7px;padding-left:7px;border:2px solid #FF0000;color:#000000;">'''CLICK Here'''</div>
    <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    <script src="Common.js"></script>
</body>
</html>

将其放入<head>会停止呈现网站，直到加载Javascript文件为止。将其置于底部附近允许网站在加载Javascript之前呈现内容（通常非常快），这使得网站看起来加载速度更快。

Answer 3

脚本标记需要与您的html文件相关，我猜这不是在本地加载：

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

尝试添加如下协议：

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>

Answer 4

出于安全原因，从脚本标记加载的脚本在从文件加载时不会在导航器上下文中运行：//

您必须将其上传到真实服务器上并使用http：//

进行访问

Jquery没有正确加载

4 个答案: