jquery id attribute selector

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".

Answer 2

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