Can't seem to get my jQuery to work
Question
I need another set of eyes on this. When I use jsfiddle everything worked but for some reason I can't get it to operate in Dreamweaver. I get no errors or the like. I'm going to try again later because it may be that my Dreamweaver is malfunctioning. Look over the code and tell me what you think please. Obviously this is a work in progress. The code is below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="Portfolio.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="PortfolioControl.js" type="text/javascript"></script>
<title>Home Page</title>
</head>
<body>
<!-- CONTENT //-->
<table align="center" id="navTable">
<tr>
<!-- NAME AND LOGO //-->
<td colspan='2' id="titleBar">
</td>
</tr>
<tr>
<td>
<div class="navButton">
<p>Home</p>
</div>
</td>
<!-- RIGHT SIDE //-->
<td id="rightSide" rowspan='5'>
<p>replaced on ready</p>
</td>
</tr>
<tr>
<td>
<div class="navButton">
<p>Art</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="navButton">
<p>Projects</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="navButton">
<p>Blog</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="navButton">
<p>Contact</p>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS
body {
background: #000000;
}
/* TITLE */
#titleBar {
height: 100px;
}
/* DYNAMIC RIGHT SIDE*/
#rightSide {
width: 620px;
border-left: 2px solid white;
padding: 15px;
}
#rightSide p {
color: #FFFFFF;
}
/* MAIN PAGE TABLE */
#navTable {
margin-top:200px;
width: 800px;
padding: 20px;
background-color: #000000;
}
#navTable td {
padding-right: 15px;
}
/* NAV BUTTONS */
.navButton p {
font-size: 18px;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
color: #FFFFFF;
}
.navButton p:hover {
color: #FF7600;
}
Javascript
$(document).ready(function() {
//create a p
var yay = $('<p>Yay</p>');
$('rightSide').append(yay);
});
2 answers
solution1
1 2013-12-11 23:16:44
It is because in your jQuery function you have not identified the correct selector for your rightSide element.
jQuery $('') selector works off the same constructs as CSS, therefore you are missing the ID identifier before rightSide.
$('#rightSide').append(yay);
should work.
solution2
0 2013-12-12 18:24:03
Here's the reason it wasn't working... Apparently I needed to download jQuery and use the local file instead of trying to link out to Google. I'm pretty sure I've linked out to the Google APIs before so I'm not sure why I couldn't this time. Anyway, thank you everyone for your help.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.