javascript - 远程表单请求后 Chrome 滚动到页面顶部

Question

rails 版本:5.2.2

Chrome 版本:78.0.3904.87

今天在 Chrome 上测试我的网站时，我注意到每当我提交 AJAX 请求时它都会滚动到页面顶部。这种行为是不可取的，并且不会在其他浏览器上发生，例如 Firefox。我试过调试这个问题，但不知道出了什么问题。

这是我的表单的样子:

<div id="container">
  <%= form_for(obj, method: :post, url: url, remote: true) do |f| %>
    <button id="obj-<%= obj.id %>-btn" type="button" class="btn btn-primary obj-btn" title="Add" data-toggle="tooltip" data-placement="left">
      Add
    </button>
  <% end %>
</div>

这是我用于提交表单的 JavaScript:

$("#container").on("click", "form > .obj-btn", function(e)
{
  $(this).tooltip('hide');

  var form = $(this).parent();

  form.submit();
});

请求发送到服务器后， Controller 在 create.js.erb 中运行 JavaScript。文件。

我查看了建议添加 e.preventDefault() 的其他线程或 return false;在提交处理程序中，但没有一个对我有用。

可能是什么问题呢？提前感谢您的帮助。

Answer 1

您应该在表单上监听并捕获提交事件，而不是按钮单击事件。 如果您使用 e.preventDefault()在这种情况下，您应该能够排除导致页面刷新的默认提交行为。因此，您的方法大致类似于这种效果:

$(document).ready(function () {
  // ***** Listen to submit event on the form itself ***** //
  $('#form').submit(function (e) {

    e.preventDefault();

    // Capture data from form 
    // and manually submit by AJAX here

  });
});