Question

任何人都可以告诉我为什么我尝试在我的计算机上运行的javascript / jQuery命令都没有，但总是在互联网上工作？以下是基本命令的示例：

Javascript文件（test.js），css文件（test.css）（不介意css）和html文件（test.html）：

var $list = $('li');
$list.click(function() {
  alert("working");
  });

li {
  list-style-type: none;
  position: relative;
  margin: 1px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: grey;
}

li.done {
  background: #CCFF99;
}

li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    
    <ul>
  <li>Acheter du lait</li>
  <li>Promener le chien</li>
  <li>Faire de l'exercice</li>
  <li>Coder</li>
  <li>Jouer de la musique</li>
  <li>Relax</li>
</ul>
  </body>
</html>

请参阅？它适用于堆栈溢出。然而，当我从我的计算机运行html文件时，js / jq脚本永远不会工作。我知道我没有不正确地链接js文件，因为Safari开发人员工具能够从html文件访问它。这有什么不对？

Answer 1

如果$list.click部分在test.js中，那么在构造li元素之前执行此代码。在$(document).ready(function(){...})

中包含您的代码

注意：

它可以在这里工作，因为在片段框架源栈中，将你的javascript片段附加到html下面 - 以便在完全构造DOM时执行代码。

Answer 2

尝试在$（document）.ready（）中编写代码，以便您可以使用DOM，否则它可能无法正常工作。你必须添加：

$(function(){
    //Your Js code
});

在您的示例中使用：

$(function(){
var $list = $('li');
$list.click(function() {
  alert("working");
  });
});

同样的问题： Script tag works inside the body but doesn't work outside

Answer 3

好的，我找到了。我只需将代码包装在

中

$(function(){

});

或

$(document).ready(function(){
//code
});

感谢Igor和JoanR。

Answer 4

您遇到的问题可能与您在浏览器中打开网页的方式有关。

您不能只将其打开为文件：c:\website\index.html

相反，您应该安装一个堆栈，如WAMP，XAMPP或EasyPHP。我推荐XAMPP

安装完成后，只需输入浏览器地址栏：

localhost

您将从index.html文件夹中看到c:\xampp\htdocs的呈现内容。该文件夹（c：\ xampp \ htdocs）成为您的网站，它的工作方式与网站完全相同。资源将正确加载（这听起来像你遇到的问题）。

安装完成后，只需清除该文件夹，然后将所有网站.html和.php等文件复制到该文件夹中。使用您网站上的相同文件夹结构。 CPANEL网站的public_html文件夹是C：驱动器上的c:\xampp\htdocs文件夹。

如果你在那里创建了一个文件夹，比如dev，并在其中放入一个名为mytest.html的文件，那么在浏览器地址栏中输入：

localhost/dev/mytest.html

另一个很棒的技巧是通过编辑Windows hosts文件为自己提供域名。例如，您可以通过编辑此文件在本地使用duchesne.com域：

c:\windows\system32\drivers\etc\hosts

请注意，该文件没有扩展名。

然后，在该文件中，在最底部，在它自己的一行上，键入：

127.0.0.1     duchesne.com

保存该文件后，当您在浏览器地址栏中输入内容时：

http://duchesne.com

您将从c:\xampp\htdocs文件夹中获取index.html文件。如果你输入：

http://duchesne.com/dev

您将从c:\xampp\htdocs\dev文件夹中获取index.html文件。

不要忘记该文件非常重要！它将永远阻止您访问在线http://duchesne.com网站。当然，禁用它就像注释掉那一行一样简单（通过在前面添加一个#）或者通过搞乱重定向，这就是我通常做的事情：

127.0.0.1     xduchesne.com

（删除前导x比重新输入整行更容易）。最酷的事情：变化立即发生，无需重新启动 - 甚至可以反弹浏览器。

资源：

Windows: XAMPP vs WampServer vs EasyPHP vs alternative

Answer 5

如果您通过＆＃34拖放您的html文件;拖放＆＃34;到浏览器窗口，你看到file://作为协议，然后jQuery无法从URL下载。这可能是你的问题。

修改

我看到你的JS代码在test.js文件中，它在head部分加载。因此，如果仍然无效，请尝试将test.js文件中的代码替换为以下内容：

$(document).on('click', 'li', function (){ alert('working'); });

Answer 6

您可能必须为您的网站包含JQuery库，以了解它将使用JQuery。这是包含它的一种方法：在html的head标签中，粘贴下面的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Answer 7

这些时候CDN后备是至关重要的。例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="//code.jquery.com/jquery-1.10.2.min.js"><\/script>');
    }
</script>
<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.10.2.min.js"><\/script>');
    }
</script>

如果Google CDN失败，则会加载jQuery CDN。如果THAT也失败，那么它会加载本地副本。

Answer 8

试试这是否有帮助

如何使用安全的jquery编码？像下面的代码一样？

jQuery(document).ready(function ($) {
    $('li').click(function() {
        alert("working");
    });
});

或

jQuery(document).ready(function () {
    jQuery('li').click(function() {
        alert("working");
    });
});

基本的jQuery命令不起作用

8 个答案: