Question

I have the following html:

<ul id="tree3" class="checkboxTree[1] checkboxTree">
 <li class="collapsed">
 <li class="collapsed">
 <li class="collapsed">
 <li class="collapsed">
 <li class="collapsed">
 <span>
 <input class="checktree" type="checkbox" value="19" fullname="MyName">

and i am trying to capture the change event of the checkbox. This works fine:

$(".checktree").change(function () {
    UpdateSelectedList();
});

but I need to scope it as i have multiple “.checktree” on the page. I tried doing this:

$("#tree3 > .checktree").change(function () {
    UpdateSelectedList();
});

or this:

$("ul#tree3 > .checktree").change(function () {
    UpdateSelectedList();
});

but they didn’t seem to fire. Can someone suggest what is wrong with the above selectors ?

Answer 1

the > element in selector means child of. Since your .checktree isn’t a direct child of #tree3, it’s not working. Try #tree3 .checktree or #tree3 > li > span > .checktree if you want the exact match.

jQuery Child Selector vs jQuery Descendent Selector