jQuery/CSS-Abkömmlingselektor, der zu viel auswählt

Question

Ich habe einige Elemente auf meiner Seite, und einige von ihnen sind in ein div mit einer Klasse eingewickelt, die mir wichtig ist (in diesem Fall "workItemRow"). Ich möchte nur Elemente, die einen Vorgänger mit der Klasse workItemRow haben, um ein Ereignis auszulösen. Das Problem ist, jedes Element ist an das Ereignis gebunden, nicht nur an die Vorfahren.

Ex. (Gekürzte Version des aktuellen Code)

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

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

und dann meine jQuery:

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

Jedes Mal, wenn ich die Auswahl ändern, der in der zweiten div ist (die ohne Klassen), das Ereignis immer noch ausgelöst, und ich verstehe nicht warum. Ich habe versucht, den Selektor auf ".WorkItemRow> .Objektiv" zu ändern, aber es ruft immer noch auf.

Answer 1

Sie tun können:

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

, die Elemente (.objective) Wich wählen wird in einem element.workItemRow gewickelt