0

我正在使用 jquery 在像 facebook 这样的评论中工作，我已经做了所有事情，但是当用户添加内容不会改变的新评论时我遇到了一些问题？我正在尝试.clone()在 jquery 中使用方法但不起作用？我必须做什么？

jQuery代码：

<script>
        jQuery(document).ready(function() {
            var form = $('.form');
            $('.normal').autosize();
            $('.animated').autosize({append: "\n"});

            form.on('submit', function(e) {
                var comment = $('.normal').val();
                e.preventDefault();

                $.ajax({
                    url: 'ajax_comment.xhtml',
                    type: 'POST',
                    cache: false,
                    data: form.serialize(), //form serizlize data
                    complete: function(jqXHR, textStatus) {
                        $('.comment').text(comment);
                        $('.name').text('Danial');
                    },
                    success: function(data) {
                        var item = $(data).hide().fadeIn(800);

                        $('.posts-items').append(item).addClass(this);

                        form.trigger('reset');
                    },
                    error: function(e) {
                        alert(e);
                    }
                });
            });
        });
    </script>

HTML 代码：

    <form class="form" method="post"> 
        <textarea placeholder="Write your post here ..." class="normal"/>
        <br/>
        <input class="postBtn" name="submit" type="submit" value="Post" />
    </form>

    <div class="posts-items">

    </div>

ajax_comment.xhtml

<head>
    <title></title>
    <style type="text/css">
        .comment-item{
            width: 300px;
            height: 50px;
            overflow: hidden;
            background-color: #123456;
        }
        .name{
            padding-left: 5px;
            color: white;
        }
        .comment{
            padding-left: 5px;
            color: white;
        }
        .image{
            width: 50px;
            height: 50px;
        }
        .left{
            width: 50px;
            height: 50px;

            float: left;
            background: #ccc;
        }
        .right{
            float: right;
            width: 250px;
            height: 50px;
            background: #888;
        }
    </style>
</head>
<body>
    <div class="comment-block">
        <div class="comment-item">
            <div class="left">
                <img class="image" src="default.gif" alt="image"/>
            </div>
            <div class="right">
                <div class="name">Name</div>
                <div class="comment">Message</div>
            </div>
        </div>
        <div style="margin-top: 5px;"></div>
    </div>
</body>
4

0 回答 0