126

代码:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

上面的代码不起作用。当我单击#clicker 时,它不会发出警报,也不会隐藏。我检查了控制台,没有收到任何错误。我还检查了 JQuery 是否正在加载,确实如此。所以不确定是什么问题。我还做了一个带有警报的文档准备功能,并且该功能有效,因此不确定我做错了什么。请帮忙。谢谢!

4

9 回答 9

210

您应该在一个$(document).ready(function() {});块中添加 javascript 代码。

IE

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

正如jQuery 文档所述:“在文档“准备就绪”之前,无法安全地操作页面。jQuery 会为您检测到这种准备状态。$( document ).ready()仅当页面文档对象模型 (DOM) 为 JavaScript 准备好后,其中包含的代码才会运行要执行的代码”

于 2013-09-03T22:14:47.100 回答
87

我通过将 ON 与 $(document) 一起使用找到了解决此问题的最佳方法。

 $(document).on('click', '#yourid', function() { alert("hello"); });

对于 id 开头,请参见下文:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

最后 1 周后我不需要添加 onclick 触发器。我希望这会帮助很多人

于 2015-12-03T19:22:49.377 回答
21

您的代码可以在没有 document.ready() 的情况下工作,只需确保您的脚本位于 #clicker 之后。查看此演示:http: //jsbin.com/aPAsaZo/1/

准备好的概念中的想法。如果您确定您的脚本是页面中的最新内容,或者它位于受影响的元素之后,它将起作用。

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

注意: demo中的代码替换httphttpsthere,或者使用这个变种Demo

于 2013-09-03T22:25:10.693 回答
5

尝试添加$(document).ready(function(){到脚本的开头,然后});. 此外,div它是否有正确的 id,即作为 id,而不是类等?

于 2013-09-03T22:14:45.813 回答
5

$(document).ready(function(){});您必须使用Look this JSfiddle来包装您的 Javascript 代码。

JS代码:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
于 2013-09-03T22:18:31.067 回答
3

确保您的按钮(例如 div 或透明的 img)上没有任何东西阻止单击该按钮。这听起来很愚蠢,但有时我们认为 jQuery 无法正常工作,所有这些都是问题,而问题在于 DOM 元素的定位。

于 2014-10-03T10:23:51.397 回答
3

您可以使用$(function(){ // code });which 在文档准备好执行该块内的代码时执行。

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
于 2017-03-08T11:04:08.217 回答
2

快速检查一下,如果您使用的是客户端模板引擎(例如把手),您的 js 将在 document.ready 之后加载,因此将没有元素可以将事件绑定到,因此要么使用 onclick 处理程序,要么在 body 上使用它并检查当前目标

于 2016-10-04T10:10:56.483 回答
0

正确的浏览器重新加载

如果您将 js 文件分开保存,请快速检查一下:确保正确重新加载您的资源。浏览器通常会缓存文件,因此只需确保在加载的资源中纠正了以前的拼写错误。

有关在 Chrome/Chromium 中禁用永久缓存的信息,请参阅此答案。否则,您通常可以使用此答案中提到的Ctrl+F5Shift+强制完全重新加载。F5

于 2021-01-28T17:21:14.353 回答