在本地主机上查看页面时 jQuery 脚本不起作用答案

【问题标题】：jQuery script not working when page viewed on localhost在本地主机上查看页面时 jQuery 脚本不起作用
【发布时间】：2011-01-11 02:55:22
【问题描述】：

我刚开始第一次在 Mac 上玩，我创建了一个非常简单的 HTML 页面，它使用 jQuery 在单击 h1 标记时进行简单的文本交换。

当我不通过网络服务器查看页面并直接在 Safari（file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html）中打开它时，它会按预期工作。但是，当我尝试通过 Apache (http://localhost/test/mypage.html) 查看时，它不起作用。

这是代码：

<html>  
    <head>  
        <title>My Awesome Page</title>  
        <script type="text/javascript" src="jquery.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            function sayHello()  
            {   $('#foo').text('Hi there!');  
            }  
        </script>  
    </head>  
    <body>  
        <h1 id="foo" onclick="sayHello()">Click me!</h1>  
    </body>  
</html>

我在 Mac 上遗漏了什么吗？不会是 Apache 设置，因为它的客户端代码......对吧？

我可能还应该提到我加载了 XAMPP 来运行 Apache 和 MySQL。我已经测试了 Apache 以确保它使用一个简单的 PHP 文件工作。

史蒂夫

【问题讨论】：

标签： javascript jquery html apache macos

【解决方案1】：

使用 Firebug 并访问该页面。可能是罪魁祸首的一件事是，由于文件权限，Web 服务器无法打开 jquery.js 文件。 Firebug 会显示页面中是否加载了 jquery，即使您可以在 Console 选项卡中即时添加 jQuery 代码。

如果您使用 Safari 访问它，请使用 Web Inspector 并查看控制台选项卡中是否显示任何错误。

最后一件事，养成避免onclick的习惯，改为这样做：

<script type="text/javascript" charset="utf-8">
  function sayHello()
  {
    $('#foo').text('Hi there!');  
  }
  //wait DOM loaded
  jQuery(function($){
    $('#foo').click(function(){
      sayHello();
    });  
  });
</script>

另外，js 代码最好放在页面末尾附近，</body> 之前，这样就不会阻塞并发页面元素的加载。

【讨论】：

Safari 的 Web Inspector 帮助了很多人。它是 jquery.js 文件的文件权限。文件夹中的其他文件的模式为 644 和管理员组，所以我在终端中运行以下命令，它就像一个冠军一样工作。 “chmod 644 jquery.js”和“chgrp admin jquery.js”