当事件实际被触发时，rails jquery无法检测到ajax事件

Question

我正在尝试绑定来自rails服务器的ajax响应；然而，在我的jquery代码中，我无法检测到任何ajax事件，即使我知道该事件实际上已经触发，因为我从我的服务器获得了正确的响应。

我知道事件已经触发的原因，是因为当我点击表单上的submit按钮时，我收到了来自服务器的响应(我在Chrome Developer Tool的网络选项卡中看到了响应)；响应正文包含了我在其中编码的散列数据，以便发送回我的浏览器，这是这个散列{ :password => "Invalid username or password“}。

更新: ajax调用是由rails自动发出的，当我向表单添加:remote data true时，它会向表单添加=> -remote=“true”属性。因此，它通过rails完成，而不是手动调用ajax。这里是文档解释http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

更新:我在session_controller中添加了以下代码：p "I'm receiving Ajax request" if request.xhr?我的服务器日志确认它实际上正在接收ajax请求；所以现在最可能的问题出在为什么jQuery无法检测到这些事件触发器。

因此，我假设ajax事件实际上是被触发的；问题是，我在jquery代码中检测不到这些事件中的任何一个；因此，我无法操作来自服务器的响应，我无法将这些事件绑定到我想要执行的任何进一步的操作。在下面的代码中，我已经确认了('login_form') DOM节点的存在，并且代码实际上正在运行。

问题出在哪里？为什么我的jquery代码不能检测ajax事件？

我真的很感激在这个问题上的帮助！

在我的jquery代码中，我有以下内容；当我单击表单时，没有一个回调函数被触发：

$(document).ready(function() {
  console.log("document is ready for use");
  console.log($('.login_form'));

  $(".login_form").on("ajax:before", function(event, data, status, xhr) {
    console.log("ajax:before is fired");
  });

  $(".login_form").on("ajax:beforeSend", function(event, data, status, xhr) {
    console.log("ajax:beforeSend is fired");
  });

  $(".login_form").on("ajax:send", function(event, data, status, xhr) {
    console.log("ajax:send is fired");
  });

  $(".login_form").on("ajax:success", function(event, data, status, xhr) {
    console.log("ajax:success is fired");
  });

  $(".login_form").on("ajax:error", function(event, data, status, xhr) {
    console.log("ajax:error is fired");
  });

  $(".login_form").on("ajax:complete", function(event, data, status, xhr) {
    console.log("ajax:complete is fired");
  });

  $(".login_form").on("ajax:aborted:required", function(event, data, status, xhr) {
    console.log("ajax:aborted:required is fired");
  });

  $(".login_form").on("ajax:aborted:file", function(event, data, status, xhr) {
    console.log("ajax:aborted:file is fired");
  });


 $(document).bind("ajaxSend", function(){
   $("#replaced").hide();
 }).bind("ajaxComplete", function(){
   $("#replaced").hide();
 });


  $(document).bind("ajaxSend", function() {
    console.log("ajaxSend is fired");
  }).bind("ajaxComplete", function() {
    console.log(".ajaxComplete is fired");
  }).bind("ajaxError", function() {
    console.log(".ajaxError is fired");
  }).bind("ajaxStart", function() {
    console.log(".ajaxStart is fired");
  }).bind("ajaxStop", function() {
    console.log(".ajaxStop is fired");
  }).bind("ajaxSuccess", function() {
    console.log(".ajaxSuccess is fired");
  });
});

首先，事件发生在form_for DOM节点上。表单代码见下表：

<%= form_for(:session, :url => login_path, :method => :post, :remote => true, :html => { :class => "login_form" }) do |f| %>
  <table class="sign_in_table", cellspacing="20">
    <tr>
      <td align="left"><span class="login_table_content">Email</span></td> 
      <td><%= f.text_field(:email, :placeholder => "Email", :class => "input_box_normal")%></td>
    </tr>
    <tr>
      <td align="left"><span class="login_table_content">Password</span></td>
      <td><%= f.password_field(:password, :placeholder => "Password", :class => "input_box_normal")%></td>
    </tr>
  </table><br>
    <%= f.submit "Login", :class => "button_normal" %>
<% end %>

会话控制器代码见下文：

class SessionsController < ApplicationController
  def create
    @user = User.find_by_email(session_params[:email])

    respond_to do |format|
      if @user && @user.authenticate(session_params[:password])
        login!(@user)
        format.html { redirect_to users_path }
      else
        @error_messages = { :password => ["Invalid username or password"] }
        format.json { render :json => @error_messages, :status => :unprocessable_entity }
      end
    end
  end
end

Answer 1

这个问题已经解决了。

这个错误实际上在我的application.html.erb文件中。

我不小心将这一行添加到了我的head标签中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这行代码将从外部而不是rails内部获得jquery源代码，因此它一定覆盖了一些默认的rails ajax行为。在删除这一行之后，我能够使用jquery检测我的ajax操作！