Question

i have a <div id="mainDIV"> which contains a <table> within which <thead> and <tbody> tags are present.

Actually i am trying these selector

$("#mainDIV > tbody").on("click", function(){ 
    alert("test");
}

so that whenever we click inside the <tbody>, that alert should be displayed. But this is not working. Can anyone please suggest me solution for this.

---

I tried the below one but its not working…

$("#mainDIV  tbody").on("click", function(){ 
    alert("test");
}

This is my part of the code thats not working..

$("#ui-datepicker-div  tbody").on("click", function(){ 
                alert("test");
});

Answer 1

You should use white space instead of >:

$("#mainDIV  tbody").on("click", function(){ 
    alert("test");
});

Live DEMO

Descendant Selector ("ancestor descendant") docs:

Description: Selects all elements that are descendants of a given ancestor.

Child Selector ("parent > child") docs:

Description: Selects all direct child elements specified by “child” of elements specified by “parent”.