CODEWITHSUNDEEP
jquerycssjquery-selectorsancestor
Justin Toman
Justin Toman

Reputation: 23

jQuery/CSS descendent selector selecting too much

I have several elements on my page, and some of them are wrapped in a div with a class that I care about (in this case, "workItemRow"). I only want elements that have an ancestor with class workItemRow to trigger an event. The problem is, every element is bound to the event, not just the ones with the ancestors.

Ex. (Shortened version of the actual code)

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

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

and then my jQuery:

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

Every time I change the select that is in the second div (the one without any classes), that event is still being triggered, and I don't understand why. I have tried changing the selector to ".workItemRow > .objective" but it still always calls it.

Upvotes: 1

Views: 197

Answers (1)

Givius
Givius

Reputation: 1008

you can do:

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

that will select elements(.objective) wich are wrapped in a element.workItemRow

Upvotes: 1

Related Questions