jQuery/CSS 하위 선택기가 너무 많이 선택되었습니다.

Question

내 페이지에 여러 요소가 있고 그 중 일부는 div (예 : "workItemRow")와 관련된 클래스로 래핑됩니다. 난 클래스 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?"); 
}); 

내가 두 번째 DIV (모든 클래스가없는 한)에 그 선택을 변경할 때마다 해당 이벤트는 여전히 방아쇠를 당겼고, 나는 왜 그런지 이해하지 못합니다. 나는 ".workItemRow> .objective"로 셀렉터를 변경해 보았지만, 여전히 그것을 항상 호출한다.

Answer 1

당신이 할 수 있습니다 요소를 (.objective) 느릅 나무를 선택합니다

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

는 element.workItemRow에 싸여있다