I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src=".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>
I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis./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>
- 1 Try to make your titles a lot more descriptive with the actual problem. Also describe your desired oute. – JGallardo Commented Sep 24, 2014 at 1:52
- Script tag cannot contain script and source at the same time. – PSL Commented Sep 24, 2014 at 1:53
6 Answers
Reset to default 3You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis./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>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis./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>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis./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>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
- Load the script
- Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis./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>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!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./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>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745420377a4626936.html
评论列表（0条）