ボタンがJSイベントに既にバインドされているときにクリックすると、JavaScriptボタンを使用してHTMLボタンのクラスを変更します

Question

遅い独自仕様のeコマースプラットフォームで作業していて、クライアントはサイト上の呼び出しボタンをスピナークリックして、ユーザによる繰り返しの提出/クリックを減らす。フロントエンドの対話とバックエンドの結果の間には、現在のところかなりの遅延があります。

ほとんどすべてのボタンは、すでにJavascriptイベントにバインドされています。ローダーアニメーションは、ボタン要素に「読み込み」という名前の新しい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のメソッド/関数を修正することを避けるために最善だと思いますが、何がだろうボタンのクリック時に "ローディング"クラスを追加する "ベストプラクティス"アプローチを使用するだけでなく、デフォルトのボタン動作に影響を与えないようにします。私が知ることから、DOM内の特定のボタン選択にthisを使用すると、スマートになる可能性があります。

2次的な目的として、サイト全体のどのボタンでもこれを実現できたら嬉しいです。

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") 
      } 
     }); 
} 

Answer 2

はい、正しいです。 thisを使用すると、選択のあいまいさが解消されます。既存のjavascriptの改変を避けることができます。コンテキスト内で一意の新しいクラス名を作成し、他のクラスと一致しないようにします。カスタム関数を作成して目的を果たすために使用します。あなたのすべてのボタンでクラスを使用し、それらを動作させる。必要ならば、既存の関数を使用し、リファクタリングすることを忘れないでください。サイトのスピードアップと、あなたが書いたコードの理解を深めるのに役立ちます。