jQuery/CSS子孫セレクタがあまりにも多く選択されています

Question

私のページにはいくつかの要素があり、そのうちのいくつかは気になるクラス（この場合は "workItemRow"）でdivにラップされています。私は、クラスworkItemRowを持つ先祖がイベントをトリガーする要素だけを必要とします。問題は、すべての要素が、祖先を持つ要素だけでなく、イベントにバインドされていることです。

Ex。 （実際のコードの短縮バージョン）

<div class="workItemRow"> 
<select class="objective"></select> 
</div> 

<div> 
<select class="objective"></select> 
</div> 

、その後、私のjQuery：

$('body').on('change', '.workItemRow .objective', function() { 
    alert("Why isn't this working?"); 
}); 

私は2番目のdiv（任意のクラスなしの1）であることの選択を変更するたびに、そのイベントがありますまだ引き金を引かれ、私は理由を理解していません。セレクタを ".workItemRow> .objective"に変更しようとしましたが、それでも常にそれが呼び出されます。

Answer 1

あなたが行うことができます：要素を選択します

$('body').on('change', '.workItemRow > .objective', function() { 
    alert("Why isn't this working?"); 
}); 

を（.objective）ウィッヒがelement.workItemRow