javascript - 基本的 jQuery 命令不起作用

标签 javascript jquery

谁能告诉我为什么我试过的 javascript/jQuery 命令在我的电脑上都不起作用,而在 Internet 上总是起作用?这是基本命令的示例:

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 文件访问它。这里有什么问题吗?

最佳答案

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

注意:

它在这里起作用,因为在代码片段框架中,源代码 stackoverflow 将您的 javascript 片段附加到 html 下方 - 以便在完全构建 DOM 时执行代码。

关于javascript - 基本的 jQuery 命令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28835119/

相关文章:

javascript - 在 JavaScript 中定义变量

javascript - 交替/双模式 JavaScript 水印

c# - 如何访问从 javascript 保存的 session 值?

javascript - 如何根据 url 添加 "active"类到下拉列表

jquery - 将空对象传递给 jQuery 的目的是什么?

javascript - Jquery Ajax HTML - 添加加载

javascript - JSDom 不将文本作为脚本运行

javascript - Jquery click 事件不会触发不止一次

Jquery检查所有选择元素selectedIndex是否为0

javascript - 最后一次按键后 1.6 秒运行 js