Question

<html>
 <head>
  <script src="../jquery.js" type="text/javascript"> </script>
  <script type="text/javascript">
   $(".demo").click(function() {
     alert("JavaScript Demo");
    });
  </script>
 </head>
 <body>
  <p class="demo">a paragraph</p>
 </body>
</html>

为什么没有点击功能响应？

感谢。

Answer 1

您过早地运行代码。你应该把它包装在一个文档就绪的处理程序中，jQuery支持它：

$(function() {
  $(".demo").click(function() {
    alert("JavaScript Demo");
  });

  // Put other initialisation code here...
});

这将确保您的代码在加载文档后运行。

Answer 2

当DOM尚未准备就绪时，您正在运行代码。

2 解决方案：

解决方案一：

在影响的元素之后添加Javascript。最好尽可能在页面下方。

这样做并非总是可行，但 suggested by YUI for speeding up your website 。

<html>
 <head>
  <script src="../jquery.js" type="text/javascript"> </script>
 </head>
 <body>
  <p class="demo">a paragraph</p>
  <script type="text/javascript">
     // This is after .demo
   $(".demo").click(function() {
     alert("JavaScript Demo");
    });
  </script>
 </body>
</html>

解决方案二：

准备好doc中的脚本。在jQuery中有 several forms 。输入最快的是$(function() { ... });：

<html>
 <head>
  <script src="../jquery.js" type="text/javascript"> </script>
  <script type="text/javascript">
     // doc ready
   $(function() {            
     $(".demo").click(function() {
       alert("JavaScript Demo");
      });
   });
  </script>
 </head>
 <body>
  <p class="demo">a paragraph</p>
 </body>
</html>

Answer 3

这是你应该怎么做的：

<html>
 <head>
  <script src="../jquery.js" type="text/javascript"> </script>
  <script type="text/javascript">
    $(document).ready(function() {

     $(".demo").click(function() {
    alert("JavaScript Demo");
  });

    });
  </script>
 </head>
 <body>
  <p class="demo">a paragraph</p>
 </body>
</html>

Here's a demo

jQuery：为什么选择器会失败？

3 个答案:

解决方案一：

解决方案二：