在jquery / ajax

Question

我有一个使用ajax，jquery和php的聊天系统。它会自动提交消息并回显它们。当消息加载时，如

但是当我提交另一条消息时，它将低于这三条消息。

如何让所有提交/加载的消息都在这些消息之上？

我试过这个，但它只是将消息放在下面：

在html文件中

<div id="new_entries"></div>

进行ajax调用后的PHP文件

echo '<div class="chat_mes_wrapper" style="position: relative;">

                <div class="person_avatar second_tab right_side" style="margin-left: 2vw;">
                    <img src="',$your_avatar,'">
                </div>

                <div class="message_bubble right_side">
                <div class="triang_right"></div>

                <p>',$message_text,'</p>
                <div class="sSfIlMGr right_side">
                    <a class="tooltip" style="color: #999;">
                        ', $language['Seen_text'] ,' ', $language['Before'] ,' ', TimeBetween(time()) ,'
                        <span>', $language['Sent'] ,' ', FormatUnix(time()) ,'</span>
                    </a>
                </div>
            </div>

        </div><div class="spacing" style="height: 8vw;"></div>';

JQuery的

$.ajax({
                 url: 'Javascript/returns/send_message.php',
                 type: 'post',
                 data: {recNbI          :       $(".sFNha").attr('id').substr(4),
                        text            :       $("#mFDARcIaK").serialize(),
                        name            :       $("#X_Y_Z").data('name'),
                        avatar          :       $("#X_Y_Z").data('avatar'),
                        lFfDu           :       $("#X_Y_Z").data('language'),
                        fTb             :       false},
                 success: function(data) {
                    $(".chat_mes_wrapper").first().insertBefore( "#foo" );;
                 },
                 complete: function()
                 {
                     Loader();
                 },
                 error: function()
                 {
                     Loader();
                 }
            });

Answer 1

您应该使用.prepend（data），如下例所示：

<强> HTML

<div id="new_entries"></div>

<强>的Javascript

//use this in your ajax response data
$.ajax({
  url: "your.php",
  cache: false
}).done(function(data) {
    $( "#new_entries" ).prepend(data);
});

这应该可以解决问题

Answer 2

将此代码添加到您的div

   style="z-index:99999;"

如果上述方法无效，请尝试以下方法：

   style="position:absolute;z-index:999999;"

  

如果使用上述代码，您可能需要调整边距或对齐方式。