JQuery 不适用于本地机器上的点击事件，答案

【问题标题】：JQuery is not working for click event on local machine,JQuery 不适用于本地机器上的点击事件，
【发布时间】：2015-05-10 21:01:27
【问题描述】：

JQuery 不适用于本地机器上的点击事件，但在 JSfiddle 上正确工作请参阅此链接JSFiddle。在下面的代码中，我试图隐藏和显示 div 的其余部分。以下代码在 jsfiddle 上运行良好，但在本地计算机上单击没有响应。请告诉我我哪里错了..

<html>
      <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>  
        $("#grid_content").on("click", ".toggle", function(evt) {
          evt.preventDefault();    // Prevent window following #hash / jump
          var more = $(this).text() === "Show More";
          $(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
        });
    </script>

    <style type="text/css">
            .bucket {
              width: 290px;
              float: left;
              margin: 0 0 48px 20px;
              border: 1px solid #262626;
              background: lightgray;

            }
            .restPart{
              overflow:auto;
              display:none; /* hide initially */
            }

      </style>
     </head>

     </body>
        <section id="grid_content">

          <div class="bucket">
            <p>Visible part....</p>
            <div class="restPart">
              <p>Content...</p>
            </div> 
            <a href="#" class="toggle">Show More</a> 
          </div>

          <div class="bucket">
            <p>Visible part....</p>
            <div class="restPart">
              <p>Content...</p>
            </div> 
            <a href="#" class="toggle">Show More</a> 
          </div>

        </section>
  </body>
</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

把你的代码放进去：

$( document ).ready(function() {
    //code here
});

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。

它可以在 jsfiddle 中工作，因为选择了 onload，所以它会自动将您的代码包装在 $(whindow).load(function(){}) 中：

包含在 $( document ).ready() 中的代码只会在页面运行一次文档对象模型 (DOM) 已准备好执行 JavaScript 代码。 $( window ).load(function() { ... }) 中包含的代码将运行一旦整个页面（图像或 iframe），而不仅仅是 DOM，都准备好了。

Reference

【讨论】：

【解决方案2】：

您需要等待 DOM 呈现。因此，将您的代码包装在 jQuery 块中：

$(document).ready(function(){
        $("#grid_content").on("click", ".toggle", function(evt) {
          evt.preventDefault();    // Prevent window following #hash / jump
          var more = $(this).text() === "Show More";
          $(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
        });
});

【讨论】：

【解决方案3】：

您的script 标记应位于正文底部，位于所有 HTML 下方。我相信 JSFiddle 会自动执行此操作。

基本上：JQuery 找不到您的 ID 选择器，因为它还不存在。

CSS 位于顶部。 JavaScript 位于底部。

在脚本标签运行时，DOM 看起来像这样：

<html>
      <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>  
        $("#grid_content").on("click", ".toggle", function(evt) {
          evt.preventDefault();    // Prevent window following #hash / jump
          var more = $(this).text() === "Show More";
          $(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
        });
    </script>

没有 ID 为 grid_content 的元素，页面尚未呈现它。脚本在浏览器点击时立即运行，因此您总是希望将 JavaScript 放在正文的底部。

值得注意的是，提到document.ready 的其他答案也是有效的，始终将 JavaScript 放在身体底部只是一个好习惯，如果浏览器正忙于运行 JavaScript，那么它不会呈现页面 - 什么如果您的 JavaScript 很繁重并且需要几秒钟才能运行？

【讨论】：

体内或体外。
在身体内部，在其他一切之后。
正如我在回答中所说，JQuery 找不到您的 ID 选择器，因为它尚未创建。我会编辑我的答案^