Question

我在堆栈溢出周围寻找同样问题的答案。通常它是简单的语法错误，如省略结束标记或不正确编写src属性。不过，我可以发誓，我的html和js是正确的，但我仍然无法让jQuery工作。

正常的javascript（函数test（））完美地运行，因为它使用onclick与html按钮链接。但是$（'＃click'）jQuery根本不起作用。

<head>
    <script type='text/javascript' src='jquery-3.2.1.min.js'></script>
    <script type='text/javascript' src='test.js'></script>
</head>
<body>
    <button type='button' style='margin: 1em;' id='click'>CLICK</button>
    <button type='button' style='margin: 1em;' id='testButton' onclick='test()'>TEST LINKING</button>
</body>

js文件和html都在同一个文件夹中。这是js.test：

$('#click').click(function () {
alert('jQuery Works!');
}); //NOT WORKING!

function test() {
alert('Okay!');
} //WORKING!

Answer 1

啊，这里的问题是当你加载JS和jQuery文件时，浏览器开始浏览你的代码，发现它现在应该绑定#click的点击处理程序，但是当它真正去找{页面上的{1}}它没有得到它。因为还没有添加到dom中！

您有三种方法可以解决这个问题：

使用脚本标记的#click属性。它用于定义在页面加载
之后才会运行的脚本
```
defer
```
只需在div之后为事件处理程序加载JS：

<script type='text/javascript' src='test.js' defer></script>

这就是您通常会看到

将CSS包含在头部中，JS包含在<head> <script type='text/javascript' src='jquery-3.2.1.min.js'></script> </head> <body> <button type='button' style='margin: 1em;' id='click'>CLICK</button> <button type='button' style='margin: 1em;' id='testButton' onclick='test()'>TEST LINKING</button> <script type='text/javascript' src='test.js'></script> </body>标记
结束之前

那是因为没有CSS你的页面看起来很难看，直到它被加载，并且最后放置JS会确保DOM就位于其上执行任何操作

您可以使用body事件处理程序。当文档准备就绪或基本上在创建dom时触发此事件。在此处绑定点击处理程序可确保elem实际上可供JS绑定到

Answer 2

你不能以这样的方式定义一个函数。你需要这样做

$(document).ready(function() {
  $('#click').click(function() {
    alert('jQuery Works!');
    //declare other function
  });
});

`

Answer 3

问题不是链接jQuery，而是关于范围和DOM加载。

当您全局创建一个函数时，它将成为一个全局引用，您可以随时随地访问它。

当您调用函数或更改变量的值时，它需要一个范围来知道何时调用。它通常是全局范围，但是，当您使用jQuery函数时，您无法知道您的库是否已经加载，因此您是否能够访问它们提供的函数。

因此，当DOM完全加载时，将您的EH包装在jQuery itelf执行的document.ready函数中。你可以这样做：

$(document).ready(function(){
  $('#click').click(function () {
    alert('jQuery Works!');
  });
});

或以较短的方式：

$(function(){
  $('#click').click(function () {
    alert('jQuery Works!');
  });  
});

我无法链接我的jQuery

3 个答案: