为什么这个jQuery click函数不起作用？

116

码：

<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是否正在加载并且确实正在加载。所以不确定是什么问题。我还执行了带有警报的文档就绪功能，并且该功能正常工作，因此不确定我在做什么错。请帮忙。谢谢！

— 星巴克
source

3

将代码包装到document.ready

— karthikr 2013年

1

您是否检查了浏览器的控制台，是否没有发现任何错误，语法或文件？

— Siddharth Pandey 2013年

1

为什么jQuery或getElementById之类的DOM方法找不到元素的

— user4642212 '18

179

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

即

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

正如jQuery文档指出的那样：“在文档“就绪”之前，无法安全地操纵页面。jQuery为您检测到这种就绪状态。$( document ).ready()页面中包含的代码仅在页面文档对象模型（DOM）为JavaScript准备就绪后才能运行。要执行的代码”

— 莫比乌斯
source

7

我真蠢！仍在学习。我以为我的点击功能不需要一个，因为它是在点击vs document.ready并在页面加载时被激活的。

— 星巴克

7

@starbucks不必担心太多，每个人都会犯错，尤其是在学习时:)

— mobius 2013年

4

文档就绪功能会根据在页面上找到的内容来设置侦听器。如果您不这样做，则永远不会设置它们。但是，执行此操作的最佳方法是改为使用“ on（）”函数委托它们。这样，加载后添加到页面的任何元素仍然可以使用！

— 肖恩·肯德尔

1

同样，使用“ on”功能，您实际上不需要使用文档就绪功能。它将侦听器设置为文档级别，然后刮取页面以供侦听元素。这就是为什么更加具体地指定您要收听的元素类型要快一些的原因，例如“ div.listentome”而不是“ .listentome”。在此示例中，它只检查div，而不是检查“ listentome”类的每个元素。

— 肖恩·肯德尔

2

@SeanKendle-不是这样的.on()。您可以（可选）使用它来创建委托的处理程序，但是无论哪种方式，它都不会“抓取页面”，它将侦听器绑定到您调用它的jQuery对象中的特定元素。

— nnnnnn'1

65

通过将ON与$（document）结合使用，我找到了解决此问题的最佳方法。

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

对于ID，请参见以下内容：

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

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

— 用户名
source

2

啊，谢谢，上面的内容对我没有用，但是可以了！（可能与角度和布线有些怪异的互动）

— Flink

就像Flink一样，我也解决了这个问题。谢谢.. 100 upvote ..

— Zeta

3

它称为委派，是动态插入或移动内容所必需的

— mplungjan '18

这个为我工作！谢谢:)

— Amrit Pal Singh

20

您的代码可以在没有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>

注意： 在jsbin演示在代码中替换http为https此处，或使用此变体演示

— 赛义德巴克
source

11

+1-您的答案说明了为什么需要此document.ready()功能。

— 凯文

1

这是一个更好的答案，因为有关jquery脚本必须在'document.ready（）'函数中的建议具有误导性。是的，它在那里更安全，但是如果您为运行中的jquery函数设置html元素（例如，根据单击的按钮查询表行），则它必须位于该函数的外部/之后。我错误地为弹出式叠加层更改了目标div的名称，然后花了几个令人沮丧的时间来查找脚本错误。吸取了很多教训。

— johnlholden 2014年

这是一个错误的答案，因为JS代码应位于DOM的开头而不是内联。您花了几个小时寻找脚本错误的事实不是JS问题，这是您的问题，即没有正确阅读文档并且不知道如何使用调试工具。

— Andrey Shipilov

@AndreyShipilov谁这么说，只要查看此页面的源代码并深入到其底部，您将在其中看到javascript代码。

— SaidbakR

1

@AndreyShipilov- 您知道如何使用调试工具解决此问题吗？然后，请与他人分享您的知识，而不要冒犯他人。努力做到建设性和公平。

— 马特

6

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

JS代码：

$(document).ready(function() {

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

— 害群之马
source

5

尝试添加$(document).ready(function(){到脚本的开头，然后添加});。另外，是否在divID中正确包含ID，即作为ID，而不是类等？

— j
source

3

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

— 维吉布
source

或例如z-index！

— darren'Apr 26'17

3

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

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

— 拉基什·卡达达斯（Rakyesh Kadadas）
source

2

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

— 阿比纳夫·辛格（Abhinav Singh）
source

没错，我正在使用flask / jinja，除非我在HTML中使用onclick属性并从那里引用我的<script>中的一个函数，否则它将无法正常工作

— Rich Stone