rails 中的远程模态形式，不触发 AJAX 事件

Question

我在 Rails 中创建了一个模态表单，它使用 AJAX 远程提交值。

出于某种原因，模态表单本身的提交不会触发任何 AJAX 事件。如果我在页面中添加完全相同的表单代码（即不在模式中），它会在提交时触发 AJAX 事件。

这是我的代码：

//index.haml
= link_to 'New', new_foo_path, data: { remote: true, type: 'script'}

//_form.haml
= bootstrap_form_for @foo, remote: true do |f|  
  = f.text_field :bar
  = f.button "Save"


//foos_controller.rb
def create
  respond_to do |format|
    if @foo.save
      format.json { render json: @foo, status: :ok }
    else
      format.json { render json: @foo.errors, status: :unprocessable_entity }
    end
  end
end

//foo.coffee
$('#new_foo').on('ajax:success', (e, data, status, xhr) ->
  console.log 'Great success'
).on 'ajax:error', (e, data, status, xhr) ->
  console.log 'Great failure'

使用上面给出的代码，让我在提交包含未通过验证的值的表单时看到 422 错误。此行为是预期的。但是，这不会将上述消息打印到 Chrome Dev Console 日志。如果我将表单代码添加到索引视图本身并从那里提交，我会看到 422 错误以及 'foo.coffee'.

中分配的日志消息

有人能发现我遗漏的东西吗？

Answer 1

重新查看您的代码后，我想出了实际问题所在。您的模态表单是使用 JS 加载的，这意味着当您的页面在浏览器中加载时它不存在。这就是为什么你的 JS 没有't/couldn 没有将回调代码绑定到表单，因为源 Dom 你想要 bind/register 它不存在。要解决此问题，您需要在页面首次加载时将回调注册到页面中存在的元素，并且您的表单必须是其子元素之一。这个概念叫做Event Delegation。所以下面的代码将起作用：

$('body')
.on 'ajax:success', '#new_foo', (e, data, status, xhr) ->
  console.log 'Great success'
.on 'ajax:error', '#new_foo', (e, data, status, xhr) ->
  console.log 'Great failure'

rails 中的远程模态形式，不触发 AJAX 事件

Remote modal form in rails, not triggering AJAX events

javascript

ajax

jquery

ruby-on-rails

ujs