I'm trying to learn some jQuery to add to a website I am creating. When the user clicks the "Add Comment" link a text area and post comment button appears but I can't seem to get it to work..
<html>
<head>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
<script type="text/javascript" language="javascript">
$("#addcomment").click(function () {
$("#postComment").show("slow");
});
</script>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="addcomment">
<a href='#' id="addcomment" class="addcomment">add comment</a>
</div>
<div id="postComment" class="postComment">
<textarea name="comment" id="comment" class="comment"></textarea>
<input type="submit" value="Post Comment"/>
</div>
</body>
and the CSS
#postComment{
display: none;
I have tried it on http://jsfiddle.net/2dA3p/2/ without issue but when running in with netbeans I have no luck. I hopefully there is a simple fix or something stupid I am doing.
PS this is my first post so hopefully I have followed the rules correctly :S
Thanks
You have to register your handler after the element already exists, so it must be wrapped in a DOM ready handler. In jQuery, the syntax for this is to wrap the code in $(function() {});
Additionally, the element IDs must be unique, or it's undefined which one the handler will actually be bound to (usually it's the first in the DOM tree that jQuery encounters).
If the event needs to be bound to multiple elements, use the class attribute instead of the ID attribute, then use a class selector.
$(function () {
$("#addcomment").click(function () {
$("#postComment").show("slow");
});
});
Possible markup (minus the superfluous classes, but you can re-add them if you need to, no harm):
<div id="container">
<div id="mainContent">
<div id="addcomment"> <a href='#'>add comment</a></div>
<div id='postComment'>
<textarea name='comment' id='comment'></textarea>
<input type='submit' value='Post Comment' />
</div>
</div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments