我有一个引导为基础的模式，允许用户添加和查看帖子：

I have a Bootstrap-based modal that allows users to add and view posts:

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="prodCommentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="modal-title">Comments</div>
      </div>

      <div class="modal-body" data-no-turbolink>
        <span id="modal-body-span">
          <%= render partial: 'posts/getposts' %>
        </span>
      </div>

      <div class="modal-footer">
        <%= form_for(@micropost) do |f| %>
          <div class="field" id="post-box">
            <%= f.text_area :content, placeholder: "Write a post..." %>
          </div>
          <div class="post-submit">
            <%= f.submit "Post", id: "post_button", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

为了离开模式时打开一个新的职位加入，我有以下的javascript：

In order to leave the modal open when a new post is added, I have the following javascript:

$(document).ready(function() {
    $('#post_button').click(function (e) {
        e.preventDefault();

        $.post('/posts',
            $('#new_post').serialize(),
            function (data, status, xhr) {
                $('.modal-body').load(document.URL+' #modal-body-span');
                $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
                $('#post_content').val('');
            });
    });
});

该模式在聊天的风格，最新的帖子被添加到下完成的。我有单独的JavaScript自动滚动模体区域的底部时，语气第一次打开。但我不能去工作是滚动到下后一个新的职位提交（而模式仍处于打开状态）。我观察到几件事情：

The modal is done in chat style where the newest posts get added to the bottom. I've got separate javascript which automatically scrolls the modal-body area to the bottom when the modal is first opened. But what I can't get to work is the scroll to bottom after a new post is submitted (while the modal is still open). I've observed a few things:

看来，scrollHeight属性被后来更新，直到它，scrollTop的将只在滚动到最旧值。任何想法？

It seems that scrollheight gets updated later and until it is, scrollTop will only scroll at most to the old value. Any ideas?

推荐答案

很多很多的尝试后，终于找到了一些作品（ajaxComplete事件）。我也需要解决，其中新的职位可能已经在上次的页/模态被重新加载问题补充，我想在模式的最新和最伟大的内容。

After many, many tries, finally found something that works (ajaxComplete event). I also needed to solve the problem where new posts may have been added since the last time the page/modal was reloaded and I wanted the latest and greatest content in the modal.

$(document).ready(function() {
    $('#post_button').click(function (e) {
        e.preventDefault();

        $.post('/posts',
            $('#new_post').serialize(),
            function (data, status, xhr) {
                $('.modal-body').load(document.URL+' #modal-body-span');
                $('#post_content').val('');
            });
    });

    $(document).on('show.bs.modal', '.modal', function () {
        $('.modal-body').load(document.URL+' #modal-body-span');
    });

    $(document).ajaxComplete(function() {
        $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
    });

    $('#myModal').on('shown.bs,modal', function () {
        $('.modal-body').scrollTop($('.modal-body').prop("scrollHeight"));
    });
});    

如果更好或更优雅的解决方案是在那里，还是会喜欢听到他们的声音。

If better or more elegant solutions are out there, still would love to hear them.