jQuery警報不起作用

我已經嘗試了幾個小時才知道使這一點的jQuery代碼工作，但我無法找到我做錯了它。在正常的JavaScript中的等價物很好。問題是什麼？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"> 
     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>

來源

2014-09-24 estebes

嘗試裏面，讓您的頭銜多了很多實際問題需要描述CSS。還描述你想要的結果。 – JGallardo 2014-09-24 01:52:45

腳本標記不能同時包含腳本和源代碼。 – PSL 2014-09-24 01:53:51

問題是在這裏

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

來源

2014-09-24 01:54:12 Mritunjay

試試這個：

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

來源

2014-09-24 01:54:27

這樣做很好，謝謝 – estebes 2014-09-24 01:57:19

您不能將腳本放入具有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>

來源

2014-09-24 01:56:56

您試圖調用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>

這背後的推理是因爲你canno牛逼調用腳本屬性加載庫，然後在相同的代碼定義了一些代碼，您需要：

加載腳本
聲明你的代碼

希望幫助！

來源

2014-09-24 01:56:58

代碼的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>

來源

2014-09-24 01:58:42 Dharmesh

你的問題是你的代碼包含在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>

來源

2014-09-24 02:01:10 JGallardo

jQuery警報不起作用

回答

相關問題