javascript - Rails 远程表单和 jquery

Question

使用rails 4.2.6、coffee-rails 4.1.0、jquery-rails 4.1.1。 有一个带有远程的表单:true

我的.slim View

div class="throughputs_update"
  = form_tag("/proxyz/throughputs/#{host['throughputs'][proxy_type]['id']}", method: :put, remote: true) do
    div class="row"
      div class="col-xs-6"
        div class="input-group"
          = number_field_tag :amount, host['throughputs'][proxy_type]['amount'], min: 0, class: "form-control"
          span class="input-group-btn"
            = button_tag nil, type:"submit", class:"btn btn-default"
              span class="glyphicon glyphicon-ok"

带有 html:

<div class="throughputs_update">
  <form action="/proxyz/throughputs/1" accept-charset="UTF-8" data-remote="true" method="post">
    <input name="utf8" type="hidden" value="✓">
    <input type="hidden" name="_method" value="put">
    <div class="row">
      <div class="col-xs-6">
        <div class="input-group">
          <input type="number" name="amount" id="amount" value="1" min="0" class="form-control">
          <span class="input-group-btn">
            <button name="button" type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-ok">
              </span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </form>
</div>

在.咖啡中

ready = ->
  console.log "first"
    jQuery ->
    $(document)
      .on "ajax:success", ".throughputs_update", ->
        console.log "ajax:success"
      .on "ajax:complete", ".throughputs_update", ->
        console.log "ajax:complete"
      .ajaxSend ->
        console.log "ajax send"
      .ready ->
        console.log "ready!"

$(document).ready(ready)
$(document).on('page:load', ready)

在我的 Controller 中:

  def update
    ...
    render json: @host, status: :ok
  end

提交表单后，不起作用，没有任何功能。唯一的console.log:

first
ready!

并且没有错误。 在 Rails 控制台中:

Started PUT "/proxyz/throughputs/3" for 127.0.0.1 at 2016-08-26 12:18:30 +0300
Processing by Proxyz::ThroughputsController#update as JS
  Parameters: {"utf8"=>"✓", "amount"=>"1", "button"=>"", "id"=>"3"}
...
Completed 200 OK in 7ms (Views: 0.2ms | ActiveRecord: 0.0ms)

为什么会发生这种情况？

Answer 1

嘿，所以我认为将 .on "ajax:success" 绑定(bind)到包装表单的 div (".throughputs_update") 是出了问题的地方。我敢打赌，如果您拿出 ".throughputs_update" 并只使用 .on "ajax:success"-> 它就会起作用。或者，如果您确实想绑定(bind)到该表单，您可以使用绑定(bind)到按钮标签的单击事件。如果您在提交表单时提供了有关您想要执行的操作的更多详细信息，那么有人可能能够描述执行此操作的好方法。