Javascript 使用ajax和jquery添加新的div实例？_Javascript_Jquery_Html_Ajax

Javascript 使用ajax和jquery添加新的div实例？

javascript jquery html ajax

Javascript 使用ajax和jquery添加新的div实例？,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我正在使用jquery处理类似facebook的评论，我已经做了所有事情，但当用户添加新评论时，我遇到了一些问题，内容不会改变？我试图在jquery中使用.clone（）方法，但不起作用？我该怎么办 JQuery代码： <script> jQuery(document).ready(function() { var form = $('.form'); $('.normal').autosize();

我正在使用jquery处理类似facebook的评论，我已经做了所有事情，但当用户添加新评论时，我遇到了一些问题，内容不会改变？我试图在jquery中使用

.clone（）

方法，但不起作用？我该怎么办

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>


jQuery（文档）.ready（函数（）{
变量形式=$（'.form'）；
$（'.normal'）.autosize（）；
$（'.animated'）.autosize（{append:“\n”}）；
表格（‘提交’）功能（e）{
var comment=$（'.normal'）.val（）；
e、 预防默认值（）；
$.ajax({
url:'ajax_comment.xhtml'，
键入：“POST”，
cache:false，
数据：form.serialize（），//form serizlize数据
完成：函数（jqXHR，textStatus）{
$（'.comment'）。文本（comment）；
$（'.name'）.text（'Danial'）；
},
成功：功能（数据）{
var item=$（data.hide（）.fadeIn（800）；
$（'.posts items'）.append（item）.addClass（this）；
触发器（“重置”）；
},
错误：函数（e）{
警报（e）；
}
});
});
});

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>


.评论项目{
宽度：300px；
高度：50px；
溢出：隐藏；
背景色：#123456；
}
.姓名{
左侧填充：5px；
颜色：白色；
}
.评论{
左侧填充：5px；
颜色：白色；
}
.形象{
宽度：50px；
高度：50px；
}
.左{
宽度：50px；
高度：50px；
浮动：左；
背景：#ccc；
}
.对{
浮动：对；
宽度：250px；
高度：50px；
背景：#888；
}
名称
消息

可能不是问题所在，但在success函数中，

这将是ajax方法本身，我认为您不能将其用作类？是的，但我已将其更改为$（'.postsitems'）.append（item）.addClass（'.comment block'）并添加在此行之前$（'.comment block'）。追加（项）不起作用，但仍然得到相同的结果。我点击发布按钮所有帖子中的所有评论中的内容都发生了变化，每次点击发布都没有什么不同！！！！