AJAX - 表单提交需要点击两次才能生效答案

【问题标题】：AJAX - Form submit requires two clicks to take effectAJAX - 表单提交需要点击两次才能生效
【发布时间】：2021-10-25 05:27:14
【问题描述】：

我尝试将.click 更改为.on('click' ....) 和.submit

也试过加async: false

但需要第二次点击才能调用成功

有人可以帮忙吗？我将不胜感激！

按钮（Ajax 触发器）

  <p>
    <%= submit_tag l(:button_save), :name => nil, :id => 'time_entry_submit' %>
    <%= link_to_function(l(:button_cancel), "$('#new_time_entry_form').toggle();$('#report_menu_options').toggle();".html_safe) %>
  </p>

js.erb

$('#time_entry_submit').click(function(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var url = $(this).parents('form:eq(0)').attr('action');

  $.ajax({
    url: url,
    method: 'POST',
    datatype: 'json',
    success: function(response) {
      window.alert(response);
      location.reload();
    }

  })
  return false;
})

当我第二次点击时警报显示

var flashNotice = $("#flash_notice");
flashNotice.remove();
$("#flash_error").remove();

然后我把console.log放在.click里面，第二次点击就会出现

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

您使用的是 UJS，所以来自 js.erb 的 js 代码将在您第一次单击提交按钮时发送到客户端，但该 js 代码只是设置了 click 函数来调用 ajax，它不是触发，所以在第一次它不会做任何其他事情。

现在您可以立即触发您的 js 代码，如下所示

// setup
$('#time_entry_submit').click(function(evt){
  // your code
});

// trigger
$("#time_entry_submit").trigger( "click" );

在这种情况下你不应该使用 UJS，你的 js 代码会在你每次点击提交按钮时发送给客户端。

您可以将您的 js 代码移动到一个 .js 文件中，该文件将被 webpack 打包到 application.js 中，然后您的 js 代码将在您加载网页时立即设置，因此只加载一次。

【讨论】：