Question

  <script>
 $("#btn1").click(function() {
     $("#logpop").hide("slow");
  });

  </script>
<body>

<div id="logpop">
    <div class="logpop_box">
    <div class="form">
    <input class="input_box" name="email" type="text" placeholder="Woosuk"/>                                  <br/><br/>
    <input class="input_box" name="pass" type="password" placeholder="******"/>  <br/>
    <button id="btn1">Login</button>

    </div>
    </div>
</div>

当我点击按钮时，我想让div消失。但它并没有消失。任何想法

Answer 1

您的JavaScript需要处于文档就绪功能中：

$(document).ready(function() {
  $("#btn1").click(function() {
     $("#logpop").hide("slow");
  });
});

目前，您的点击处理程序在创建DOM之前正在执行，因此无法附加。

Answer 2

您应该在文档就绪块中注册您的点击处理程序：

$(function(){
    $("#btn1").click(...);
});

您的脚本在元素存在之前运行，因此没有注册点击处理程序。

Answer 3

除了其他答案所说的，你不能选择一个尚未解析的元素，因为浏览器按照它在解析源文档时出现的顺序执行内联JavaScript - 所以在这一点上你的代码运行没有解析过任何元素。有两种方法可以解决这个问题：

将您的代码放在$(document).ready()处理程序中（或使用旧式onload事件处理程序）。
在尝试引用的元素后，将脚本块移动到的任意位置。大多数人发现文档中间的脚本块很乱，所以（除非绝对必要）我建议将它放在最后，就在结束</body>标记之前。

为什么jQuery点击功能不起作用？

3 个答案: