jQuery 警报不起作用答案

【问题标题】：jQuery alert does not workjQuery 警报不起作用
【发布时间】：2014-11-18 09:04:19
【问题描述】：

我已经尝试了几个小时，知道如何让这段 jquery 代码工作，但我就是找不到我做错了什么。普通javascript中的等价物工作得很好。问题是什么？

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

【问题讨论】：

试着让你的标题对实际问题更具描述性。还要描述你想要的结果。
脚本标签不能同时包含脚本和源代码。

标签： javascript jquery html

【解决方案1】：

问题来了

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

//js code

</script>

在您的script 标签中，您提供了源代码和一些代码，您应该为两者编写单独的script 标签，见下文

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script>
//js code

</script>

【讨论】：

【解决方案2】：

试试这个：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

您不能将脚本放在具有 src 属性的标签中。您需要在一个脚本标签中调用 jQuery 库，然后将您的实际脚本放入另一个标签中。

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  alert("HI");
  $(document).ready(function(e){
    alert("Hi");
    $("#button5").click(function(event)
    {
      alert("HI");
    });
  });
</script>

【讨论】：

【解决方案4】：

您正在尝试调用 jQuery 库，同时还在这里实现您的代码 sn-p：

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

您应该首先加载 jQuery 库，然后像这样实现您的代码 sn-p：

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  alert("HI");
  $(document).ready(function(e){
    alert("Hi");
    $("#button5").click(function(event){
      alert("HI");
    });
  });
</script>

这背后的原因是因为你不能调用脚本属性来加载一个库，然后在同一个标签中定义一些代码，你需要：

加载脚本
声明您的代码

希望有帮助！

【讨论】：

【解决方案5】：

JS 脚本参考代码行应结束，实际 JQuery 代码应包含在单独的脚本标签下。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
    <script type="text/javascript">
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5">abcd</div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

【讨论】：

【解决方案6】：

您的问题是在 jQuery 的脚本标记中包含您的代码。

改为：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
  </head>
  <body>

    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </body>
</html>

没问题，但您不需要type="text/javasript"。见：Do you need text/javascript specified in your <script> tags?

最好将您的脚本放在底部，这样您的内容可以更快地加载。见：If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?

你的<link> 需要在你的<head> 中

【讨论】：