javascript - 当定时 javascript 刷新时，Div 会拉伸(stretch)

Question

我有一个 div，它设置为通过 javascript 重新加载每 5 秒刷新一次。当主页加载时它很好，它适合它的框并且一切都在行(图 1)。 5 秒后，当 javascript 重新加载它时，它会拉伸(stretch) div(图 2)，再过 5 秒后，它会再次拉伸(stretch)(图 3)，然后它会保持在这个拉伸(stretch)水平。我试过将 id=messages 的 div 作为 class=col_1_2 一个，但它没有任何区别。

index.php - div 所在的位置:

<div class="container">
<div class="clear padding20"></div>
<div class="col_1_2"><?php include('companynews.php'); ?></div>
<div class="col_1_2 last" id="messagesouter" name="messagesouter"><div id="messages" class="messages"><?php include('messages.php'); ?></div></div>
<div class="clear padding20"></div>
 <div class="container">
<ul>
        <li><a href="#tabs-0">Employee Details</a></li>
        <li><a href="#tabs-1">Abscence Records</a></li>
        <li><a href="#tabs-2">Fleet Records</a></li>
        <li><a href="#tabs-3">Time Sheets</a></li>
        <li><a href="#tabs-4">Abscence Request</a></li>
      </ul>
      <div class="clear"></div>
      <div class="bordered_box"></div>
more of the page

重新加载消息 div 的 Javascript:

<script type="text/javascript">
function loadlink(){
    $('#messages').load('messages.php',function () {
         $(this).unwrap();
    });
}

loadlink(); 
setInterval(function(){
    loadlink() 
}, 5000);
</script>

类的 CSS:

.col_1_2 {
    width:460px;
    float:left;
    margin:0 20px 0 0;

messages.php 的示例输出:

<div class="toogle_box">
      <div class="toggle opened_toggle">
        <div class="icon"></div>
        Messages </div>
      <div class="toggle_container">
      <!--LINE MANAGER ONLY ITEMS-->
            <!--PENDING ABSCENCE REQUESTS-->
      You have 1 pending abscence request<br>
    <!--TIMESHEETS TO BE COMPLETED-->
    Please complete the timesheet for 01/12/2015<br>Please complete the timesheet for 02/12/2015<br>
</div>
    </div>

Answer 1

看起来您在布局中使用了一些 CSS 框架(Bootstrap？)，即 .col_1_2。

当您使用 jQuery .load() 方法时，您是从 message.php 获取内容，这没问题。

但是，在加载完成后，您发出 $(this).unwrap()，它会删除包含 #messages 的父元素，首先是带有classes col_1_2 last 然后在另一个负载上，带有 class container 的 block 。

代码系统地逐个父 block 撤消布局父 block 。

我认为您不需要 .unwrap() 方法，因此请尝试将其删除。