jquery - 添加另一个 div 会动态地将先前 div 的所有滚动向上推

Question

我的 html 看起来像这样：

<div id="main">
  <div style="height:200px; width:100px; overflow:scroll; display:inline-block;">
    hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>
  </div>
</div>
<input type="submit" id="clickme" />

我的jQuery看起来像这样：

$('#clickme').on('click', function()
{ 
    $('#main').html($('#main').html() + '<div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/></div>');  
});

这是一个活生生的例子。

当我向下滚动第一个 div 并单击提交时，它应该在其右侧添加另一个 div 但不向上滚动第一个 div。我花了很长时间才意识到问题所在，所以我想我会分享它。

Answer 1

解决方案很简单。我以错误的方式将控件添加到 html 中。我应该使用insertAfterjquery 中的函数来完成它，如下所示：

$('#clickme').on('click', function()
{
    $('<div style="height:200px; width:100px; overflow:scroll; display:inline-block;">   hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  </div>')
    .insertAfter($('#main').children().last());  
});

如这个链接所示。