Question

好的，这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>test</title>
        <style type="text/css">
            .invirep{
                display:none;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var replylinkcode = $('<a href="#" id="reply"> [Reply]</a>');
                $('#comments ul li').append(replylinkcode);
                $('#reply').click(function(){
                    var textareacode = $("<br/><textarea cols='10' rows='2' id='replybox'></textarea>");
                    $(this).parent().append(textareacode);
                });
            });
        </script>
    </head>
    <body>
        <div id="comments">
            <ul>
                <li>Comment 1</li>
                <li>Comment 2</li>
                <li>Comment 3</li>
                <li>Comment 4</li>
            </ul>
        </div>
    </body>
</html>

我的问题是：为什么只有当我点击文本框出现的第一项的回复链接而不是其他项目（第二，第三和第四项）时才会出现？

Answer 1

看起来你将一个jQuery选择器附加到一个元素。

var replylinkcode = $('<a href="#" id="reply"> [Reply]</a>');

应该是：

var replylinkcode = '<a href="#" id="reply"> Reply</a>';

Answer 2

首先，您使用的是非常旧的版本的jQuery - 当前版本是未来的三个主要版本。请升级，确实没有很多理由不去。

其次，您使用相同的id创建多个元素 - 这是无效的HTML，这可能是代码无效的原因。

使用jQuery 1.4中引入的新语法，您可以重写代码：

$('<a>', {
    text: '[reply]', 
    href: '#', 
    click: function(){
        $("<br/><textarea cols='10' rows='2' id='replybox'></textarea>").appendTo(this.parentNode);
    }
}).appendTo('#comments li');

Answer 3

因为你使用的是ID而不是类。

http://jsfiddle.net/a55Tb/

带有列表的JQuery问题

3 个答案: