Rails Bootstrap 4 的 button 按钮防抖?

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

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 的类和属性. 请问大家有更好的方法吗? 谢谢

共收到 3 条回复

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 原生特性

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