1

我正在尝试学习一些 jQuery 以添加到我正在创建的网站中。当用户单击“添加评论”链接时，会出现一个文本区域和发表评论按钮，但我似乎无法让它工作..

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

和 CSS

#postComment{
display: none;

我已经在http://jsfiddle.net/2dA3p/2/上尝试过没有问题，但是在使用 netbeans 运行时我没有运气。我希望有一个简单的修复或我正在做的一些愚蠢的事情。

PS这是我的第一篇文章，所以希望我正确地遵守了规则：S

谢谢

4

2 回答 2

2

你必须在元素已经存在后注册你的处理程序，所以它必须被包装在一个 DOM 就绪的处理程序中。在 jQuery 中，其语法是将代码包装在$(function() {});

此外，元素 ID 必须是唯一的，否则无法定义处理程序实际绑定到哪个（通常它是 jQuery 遇到的 DOM 树中的第一个）。

如果事件需要绑定到多个元素，请使用类属性而不是 ID 属性，然后使用类选择器。

$(function () {
    $("#addcomment").click(function () {
        $("#postComment").show("slow");
    });
});

可能的标记（减去多余的类，但如果需要，您可以重新添加它们，没有害处）：

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

jsFiddle 演示

于 2013-08-11T03:05:44.187 回答
1

所以。您需要将您的 javascript 放在您正在与之交互的元素之后，或者将该代码放在准备好的 DOM 中。

$(document).ready(function(){
    $("#addcomment").click(function () {
        $("#postComment").show("slow");
    });
});
于 2013-08-11T03:05:55.170 回答