壊れやすいJqueryコードにつながるクラス名へのイベントのバインド

Question

免責事項： 誰かがこれらの質問をしたと確信していますが、同様の質問を見つけるための正確なGoogleキーワードを考えることはできませんでした。だから私と一緒に耐えてください。

質問： 私は常に必要に苦しんでいますが理由は次のパターンのjQueryのコードの全体のバルクを再書き込みします

<div class = 'foo'></div> 

<script> 
    $('.foo').on('click', function(){ 
     // Do something 
    }); 
</script> 

このコードの問題は、それがあまりにも壊れやすいということです。クラスの名前を変更してDOMの構造を変更すると、JSハンドラーをDOMエレメットにバインドすることに関連するJSの全体が編集対象になります。

リスクのような種類のjQueryのコードがにくくするか、または理想的にはすべてのそれを排除するためのベストプラクティスは何ですか？

Answer 1

構造体またはコンポーネントを定義しているクラスではなく、発生しているイベントに基づいて、バインドするクラスを追加する方が簡単です。例えば

：

<button class="foo js-add-user">Add User</button> 

<script> 
    $('.js-add-user').on('click', function() { 
    //.. 
    }); 
</script> 

あなたが.fooを変更したい場合、あなたはハンドラを台無しにする必要はありません方法。

Answer 2

あなたの要素をキャッシュし、ちょうど変数を参照することができます：あなたは、クラス名を変更する必要がある場合

var foo = $('.foo'); 
foo.on('click', function(){ 
    // Do something 
}); 

はその後、あなただけの一箇所でそれを変更する必要があります。これには、使用するたびに要素のDOMを再クエリする必要がないという利点もあります。

Answer 3

この方法でそれを行うには良い方法かどうかは知りませんが、私は通常のonclickいくつかの関数を呼び出すには、以下の構造を使用します。

<div onclick='myFunction();'></div> 

<script> 
    function myFunction() { 
    alert('Hey!'); 
    } 
</script> 

Answer 4

あなたのカスタムパラメータでエイリアス関数を作成することができ、後でそれらを保存することができます。また..あまりにもIDに設定する、またはクリックイベントを削除するには、このようなものを機能を追加することができます。

function setClickOnClass(className, func){ 
    var className = className; 
    $(className).click(function(){ 
     func(); 
     //... 
    }); 
} 

その後、あなただけの1本の電話をかけると、あなたはその時点でクラスを編集します。複数の場所や瞬間からやりたい場合は、「クラス」を作成することができます。

function ClickOnClass(className, func){ 
    var className = className; 

    this.setClick = function(optionalClassName){ 
     var classN = (optionalClassName) ? optionalClassName : className; 
     $(classN).click(function(){ 
      func(); 
      //... 
     }); 
    }; 

    return this; 
} 

//initialization 
var clickHandler = new ClickOnClass('.foo', func); 

//later in code 
clickHandler.setClick();