javascript - 当按钮已经绑定(bind)到 JS 事件时，单击时用 Javascript 修改 HTML 按钮的类

Question

在速度较慢的专有电子商务平台上工作，客户要求网站上的号召性用语按钮在单击后切换为旋转图标或加载动画，以减少用户的重复提交/点击。目前前端交互和后端结果之间存在很大的延迟。

几乎所有按钮都已绑定(bind)到 Javascript 事件以增强其功能。通过将名为“loading”的新 CSS 类附加到按钮元素，可以轻松实现加载器动画。

HTML 按钮示例:

<button class="mz-button ui primary button" data-mz-action="next">Next</button>

带有加载动画的 HTML 按钮示例:

<button class="mz-button ui primary button loading" data-mz-action="next">Next</button>

我认为最好避免直接修改预先存在的 Javascript 方法/函数，但是在单击按钮时附加“加载”类同时确保默认按钮行为不受影响的“最佳实践”方法是什么？据我所知，使用 this 在 DOM 中选择特定按钮可能是明智之举。

作为次要目标，如果我能让站点范围内的任何按钮都发生这种情况，那就太好了。

Answer 1

您应该创建一个具有按钮元素参数和ajax所需的其他参数的函数。在 ajax 调用之前，将加载器类设置为参数中传递的按钮，并在从服务器获取响应时删除加载器类。

function eventhandler(ajaxParams,buttonObj){
    $(buttonObj).addClass("loader");
    jQuery.ajax({
          type: "post",
          url: url,
          data: ajaxParams,
          success: function(data) {
            $(buttonObj).removeClass("loader")
          },
          error: function(jqXHR,err) {
            $(buttonObj).removeClass("loader")
          }
      });
}