Question

我有一个评论系统，当提交时，会使用提交的消息更新div元素。

HTML

<div class="comPostSpan" style="display:none;"></div>
<form method="post" action="javascript:;" class="comStatusForm">                   
    <div class="comStatusForm">
        <input type="text" name="comInput" class="comInput" id="comInput<?php echo $statRow['statID']; ?>" placeholder="Comment...">
        <input type="submit" name="comStat" value="SEND" class="comStat" id="<?php echo $statRow['statID']; ?>">
    </div>
</form>

当提交第一篇文章时，div类comPostSpan会更新，消息没有问题。但是，如果没有页面刷新，则会提交第二条消息，将最后一条消息更改为新消息。我想要它做的是在最后一条消息下添加新消息（我希望这是有道理的。）

JS

$(function(){
$('body').on('click', '.comStat', function() {
    var comStatID = $(this).attr("id");
    var comInput = $("#comInput"+comStatID).val();
    $.ajax({
        type: "POST",
        url:"profileAdd.php",
        data: "comInput=" + comInput + "&comStatID=" + comStatID + "&uname=" + "<?php echo $memName; ?>" + "&uID=" + "<?php echo $memID; ?>" + "&statType=" + "statusComment" ,
        dataType : "text",
        success: function(data){
            $('.comPostSpan').fadeIn(3000);
            $('.comPostSpan').html(data);
            $(".comInput").attr("placeholder", "Comment...").val("").focus().blur();
            return false;
        }
    });
    return false;
});
});

我确实尝试使用以下内容包装成功函数：

$('.comPostSpan').each(function(){
    //Success data here...
});

但作为一个JS菜鸟，这不起作用。

如何修改此代码，以便在不需要页面刷新的情况下为每个帖子创建新的.comPostSpan div？

始终感谢来自这个社区的帮助：）

最诚挚的问候。

Answer 1

使用.append(data)代替.html(data)

延迟：

.append(data).delay(3000)

Answer 2

用户

$('.comPostSpan').append(data)

附加消息。当你使用

$('.comPostSpan').html(data),

它用新文本覆盖现有文本。

Answer 3

你可以这样做。首先替换内容然后fadeIn。

 $('.comPostSpan').html(data);
 $('.comPostSpan').fadeIn(3000);

Answer 4

第一名：正如我在评论中所说的

使用.append()代替.html()

第二次用于淡入淡出在最后一条消息中，您可以使用.promise().done()确保您的数据已经附加了hide()和fadeIn()上一条新消息

$('.comPostSpan').append(data).promise().done(function(){
    $('.newmessage:last').hide().fadeIn(1000);
});

Simple Demo

JQuery Ajax调用更新一个新的div

4 个答案: