イベントデリゲートでjQueryフィルタ関数を使用するには？

Question

青いボタン（場合によってはクラス.blueを持つ）を持つBox2列のすべてのテキストボックス（クラス.box）の変更をバインドする必要があります。以下は

は（ボタンのBOX1、Box2の&）3列を持っているだけでHTMLテーブルである私が持っているHTMLのスクリーンショットです：

クラス.blueは、いくつかのボタンの上に存在することができますページロードで&も、別のAjax操作の結果としてボタンに削除/追加することができました。

jQueryの.on()が .on(events [, selector ] [, data ], handler) を持っているが、私はそこに変更イベントをバインドし、その後必要に応じてテキストボックス&をフィルタリングする

jQuery('.box').filter(function(){ 
     return jQuery(this).closest('tr').find('.blue').length 
    }); 

のような機能を使用することができ、セレクタ部に.filter()を使用することが可能ですか？ #parentを考慮

は私が

jQuery('#parent').on('change','.box',..);をしようとしていたが、私はそれだけで特定のものを聞きたいのに対し、これはすべてBOX2要素の変化に耳を傾けますHTMLの親div要素です。

アイデアをお願いしますか？

ありがとうございました。

Answer 1

を与えることはできません、私たちは親要素のイベントを結合し、ターゲット（selector）に基づいて、その上にイベントを聴いています。私たちが確信しているのは、target-elementのspecific-selectorです。さて、動的に追加される要素のspecific-childまたはspecific-siblingのリンクの場合、ハンドラ（コールバック）内での処理が唯一の方法です！

委任イベントは、それらが後の時点で文書に追加される子孫要素からのイベントを処理することができるという利点を有します。デリゲートされたイベントハンドラがアタッチされた時点で存在することが保証されている要素を選択することにより、デリゲートされたイベントを使用して、イベントハンドラを頻繁にアタッチしたり削除したりする必要がなくなります。

注：ドキュメントツリーの上部に多くの委任イベントハンドラを添付すると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクタを、イベントターゲットからドキュメントの先頭までのパスのすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素に可能な限り近いドキュメントの場所にアタッチします。文書や文書を過度に使用しないでください。大きな文書の委任されたイベントのボディ。 [Reference]

Answer 2

利用Aボタン（■）は青色のクラスを持っているかどうかをテストする場合

$('.parent').on('change','.box2 input',function(){ 
    if($(this).closest('tr').find('.box').is('.blue')) { 
     //do code here 
    } 
}); 

Answer 3

は、ボタンの別のチェックを含めます。任意のコードがなければ、それはあなたが正しいコードイベント委任で

jQuery('#parent').on('change','.box',..); 
    if ($(this).next().hasClass('blue')) { 
    // Do other stuff 
    }