javascript - UJS + Bootstrap按钮加载

Question

我正在使用 Twitter Bootstrap 的按钮加载状态和 Rails Unobtrusive JavaScript http://twitter.github.com/bootstrap/javascript.html#buttons

表单元素使用 data-remote="true" 选项并返回 .js 文件。 提交按钮调用 .button("loading")，使用以下 JS:

$(document).on("click", ".btn-loading", function() {
  var btn;
  btn = $(this);
  btn.button("loading");
});

有没有办法检测 Ajax 成功和错误条件并重置按钮状态？

我尝试执行如下操作，但触发此函数后，我不知道如何访问事件的 .btn-loading 元素

$(document).on("ajax:success", function(evt, data, status, xhr) {
  var btn;
  btn = $(this);  //how to access .btn-loading() that's active?
  btn.button("reset");
  btn.button("toggle");
});

关于如何在ajax请求后重置按钮有什么建议吗？

另外，如何检测 HTML5 错误并重置按钮状态？

更新:2012 年 8 月 14 日

事实证明，您可以通过以下方式监听事件并触发按钮:

$(document).on("ajax:success", "form[data-remote]", function(evt, data, status, xhr) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});

请参阅此维基:https://github.com/rails/jquery-ujs/wiki/ajax

但是，错误捕获部分不起作用，有人在这方面取得了成功吗？

$("form").live("ajax:aborted:required", function(evt, elements) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});

Answer 1

如果你看jquery docs on bind (通常用于事件处理)，他们注意到处理程序函数中的 this 指的是 处理程序 绑定(bind)到的 DOM 元素 ，而不是发起事件的元素。因此，最简单的方法是为所有加载按钮提供一个公共(public)类(在本例中我们将其称为“ajax-button”)，将您的成功处理程序绑定(bind)到该类，然后您将拥有适当的 this 在您的处理函数中可用。

如果您使用 jquery(假设您有一些函数 resetButton 可以执行您想要执行的任何重置操作)，您只需使用类似以下内容即可进行重置。

$(".ajax-button").bind("ajax:success", function() { 
     $(this).button("reset").button("toggle");})

This tutorial on Unobtrusive Javascript有一些特定于 Rails 的良好附加信息