为什么这个 jQuery 单击功能不起作用?

IT技术 javascript jquery onclick click onclicklistener
2021-01-16 14:41:44

代码:

<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 是否正在加载,确实是。所以不确定是什么问题。我还做了一个带有警报的文档准备功能,它起作用了,所以不确定我做错了什么。请帮忙。谢谢!

6个回答

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

IE

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

正如jQuery 文档所述:“在文档“准备好”之前,不能安全地操作页面。jQuery 会为您检测这种准备状态。包含在其中的代码$( document ).ready()只会在页面文档对象模型 (DOM) 准备好用于 JavaScript 时运行要执行的代码”

文档就绪函数根据它在页面上找到的内容设置侦听器。如果您不这样做,则永远不会设置它们。然而,最好的方法是将它们委托给“on()”函数。这样加载添加到页面的任何元素仍然有效!
2021-03-17 14:41:44
@SeanKendle - 不是这样的.on()您可以(可选)使用它来创建委托处理程序,但无论哪种方式,它都不会“抓取页面”,而是将侦听器绑定到您调用它的 jQuery 对象中的特定元素。
2021-04-02 14:41:44
此外,使用“on”功能,您实际上不需要使用文档准备功能。它将侦听器设置为文档级别,然后抓取页面以获取要侦听的元素。这就是为什么更具体地说明您想要收听的元素类型会更快一些,例如“div.listentome”而不是“.listentome”。在这个例子中,它只检查 div,而不是检查“listentome”类的每个元素
2021-04-06 14:41:44
@starbucks 不要太担心,每个人都会犯错,尤其是在学习时 :)
2021-04-08 14:41:44
我多么愚蠢!!仍在学习。我以为我的点击功能不需要一个,因为它是在点击与 document.ready 时激活的,它在页面加载时加载。
2021-04-11 14:41:44

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

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

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

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

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

它称为委托,用于动态插入或移动的内容
2021-03-25 14:41:44
就像 Flink 一样,我也解决了这个问题。谢谢.. 100 赞成..
2021-04-07 14:41:44
啊,谢谢,以上对我不起作用,但这对我有用!(可能是与角度和路由的一些奇怪的交互)
2021-04-08 14:41:44

您的代码可以在没有 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在代码中替换httphttps那里,或者使用这个变体Demo

这是一个错误的答案,因为 JS 代码应该在 DOM 的头部而不是内联。您花了几个小时寻找脚本错误的事实不是 JS 问题,而是您没有正确阅读文档并且不知道如何使用调试工具的问题。
2021-03-22 14:41:44
+1 - 您的回答解释了为什么需要该document.ready()功能。
2021-04-02 14:41:44
@AndreyShipilov 谁说的,只需查看此页面的源代码并深入到其底部,您就会在那里看到 javascript 代码。
2021-04-03 14:41:44
这是一个更好的答案,因为 jquery 脚本必须在 'document.ready()' 函数内的建议是误导性的。是的,那里更安全,但是如果您动态设置 jquery 函数的 html 元素(例如根据单击的按钮查询表格行),则它需要在该函数之外/之后。我错误地为我的弹出式覆盖更改了目标 div 的名称,然后花了几个令人沮丧的小时来寻找脚本错误。大教训。
2021-04-06 14:41:44
@AndreyShipilov -知道如何使用调试工具来解决这个问题吗?然后请与他人分享您的知识,而不是冒犯他们。尽量做到建设性和公平。
2021-04-07 14:41:44

尝试添加$(document).ready(function(){到脚本的开头,然后});. 另外,divid 是否正确地包含在其中,即作为 id,而不是类等?

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

JS代码:

$(document).ready(function() {

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