Rails Bootstrap 4 的 button 按钮防抖?

wwwicbd · 2018年04月15日 · 最后由 Rei 回复于 2018年04月16日 · 2144 次阅读

Rails5 with Bootstrap4,

点击按钮去请求一个耗时的同步操作,给用户 UI 提示,并禁止他在此期间有意或者无意的重复点击。

查到 button_to 里有 disable_with 的选项,很好用,但是不知道怎么在 disable_with 中添加复杂元素。

问题 1:

如何将图片和 JS 操作用于 disable_with ?

Bootstrap 有 disabled 类,也支持 disabled 属性. 当使用 $(this).attr("disabled", "disabled"); 发现后端收不到请求了,等待期间重复点击也收不到请求. 当使用 $(this).addClass("disabled"); 可以收到请求,但等待期间重复点击也会收到重复请求。

问题 2:

禁止提交重复请求该如何写 JS 的绑定事件?

目前我的解决办法是:

<%= button_to containers_path,
                    method: :post,
                    class: "btn btn-block btn-outline-primary",
                    id: "create_tube",
                    remote: true do %>
$(function () {
        $("#create_tube").click(function () {
            if ($(this).hasClass("disabled")) {
                $(this).attr("disabled", "disabled");
            } else {
                $("#create_tube .fa-plus").addClass("fa-pulse");
                $(this).addClass("disabled");
            }
        });
    });

完成之后再分别重置 disabled 的类和属性。 请问大家有更好的方法吗?谢谢

css 基础了解下?

.event-disabled {
  pointer-events: none;
  opacity: 0.6;
}
42thcoder 回复

哦哦,谢谢。之前确实不知道这个样式,现在改成这样了:

$("#create_tube").click(function () {
    $("#create_tube .fa-plus").addClass("fa-pulse");
    $(this).addClass("disabled"); //with CSS: pointer-events: none;
});

上面提到的问题:给 html 加 disabled 属性,点击收不到请求,请问这个怎么解释?

wwwicbd 回复

HTML 原生特性

需要 登录 后方可回复, 如果你还没有账号请 注册新账号