Rails 3.1 远程按钮不引人注目的 Javascript 事件未捕获（JQuery）

Question

我想开始使用 Ajax 事件 ajax:success、ajax:failure、ajax:complete 和 ajax:beforeSend 作为在帖子中推荐的不引人注目的 Javascript：

• http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/
• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

但由于某种原因它对我不起作用。我错过了一些东西（一些小东西），因为我无法让事件触发我的 Javascript。我希望有人能够发现我的代码中的“明显”错误/遗漏。

关于我的环境的一些详细信息：

• Rails 3.1
• jQuery (jquery-rails gem)
• therubyracer for server side jsprocessing（这对我的示例来说并不重要）

为了尝试找出我所缺少的内容，我创建了一个简单的测试应用程序，其中有一个单个远程按钮。单击按钮时，我希望触发警报框。这个应用程序的代码可以在github上看到：

http://github.com/jpmcgrath/rbtest

我已将应用程序部署到heroku：

http://rbtest.heroku.com/projects/

如果你看看在应用程序中，您可以单击该按钮，该按钮成功创建了一个新项目（查看它手动刷新），但 ajax:success 事件似乎没有发生？

代码的内容如下：

在projects_controller.rb中

def remote_test
  @project = Project.new(:name => "remote test")

  respond_to do |format|
    if @project.save
      puts "project saved!\n\n\n"
      format.html { redirect_to @project, notice: 'Project was successfully created.' }
      format.json { render json: @project, status: :created, location: @project }
    else
      format.html { render action: "new" }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

在application.js中

jQuery(document).ready(function() {

  jQuery(".remote_button").click(function() {
    alert('Handler for .click() called.');
  })
  .bind("ajax:complete", function() {
    alert('complete!');
  })
  .bind("ajax:beforeSend", function () {
    alert('loading!');
  })
  .bind("ajax:error", function (xhr, status, error) {
    alert('failure!');
  })
  .bind('ajax:success', function(event, data, status, xhr) {
    alert('success!');
  });
});

在视图projects/index.html.erb中

<%= button_to "remote test", remote_test_path, :remote => true, :class => 'remote_button'  %>

如果有人可以指出我所缺少的内容（我怀疑它与响应类型有关），那么它会不胜感激。

Answer 1

您的事件处理程序未触发的原因是您的选择器位于错误的元素上。 Button_to 创建一个带有单个输入标签的表单，并且该输入标签具有您选择的类，但 ajax 事件是在表单上触发的，而不是输入标签。

试试这个，

jQuery(document).ready(function() {

  jQuery(".remote_button").click(function() {
    alert('Handler for .click() called.');
  });

  jQuery("form.button_to").bind("ajax:complete", function() {
    alert('complete!');
  })
  .bind("ajax:beforeSend", function () {
    alert('loading!');
  })
  .bind("ajax:error", function (xhr, status, error) {
    alert('failure!');
  })
  .bind('ajax:success', function(event, data, status, xhr) {
    alert('success!');
  });
});

我在我的 firebug 控制台中做了等效的操作，当回调位于表单上时，它触发了 ajax:success 处理程序。

要更改表单上的类，请使用 :form_class 选项将其从 button_to 更改为其他内容

<%= button_to "remote test", remote_test_path, :remote => true, :class => 'remote_button', :form_class => 'remote_button_form' %>

添加 ajax 回调

jQuery(".remote_button_form").bind ...

然后使用http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to

Answer 2

Rails 改变了 javascript 文件的处理方式。

Railscasts 有几个例子。

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

http://railscasts.com/episodes/267-coffeescript-basics?autoplay=true