Question

我已经尝试了几个小时知道让这些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>

Answer 1

您不能将脚本放在具有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>

Answer 2

问题在这里

<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>

Answer 3

试试这个：

<!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>

Answer 4

您正在尝试调用jQuery库，同时在此处实现您的代码段：

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

您应首先加载jQuery库，然后实现您的代码段：

<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>

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

加载脚本
声明您的代码

希望有所帮助！

Answer 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>

Answer 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> CSS需要在<head>

中

jQuery警报不起作用

6 个答案: