javascript - Refer to nested HTML elements with jQuery -

i have extensive html element in following (simplified) format:

<div id="firstdiv" class="container">     <ul>         <li id="4"> <a title="id:4">tree</a>             <ul>                 <li id="005"> <a title="id:005">leaf tree</a>                     <ul>                         <li id="10"> <a title="id:10">fruit tree</a>                             <ul>                                 <li id="0050338"> <a title="id:0050338">apple tree</a>                                     <ul>                                         <li id="399"> <a title="id:399">green apple tree</a>                                         </li>                                     </ul>                                 </li>                             </ul>                         </li>                     </ul>                 </li>                 <li id="005"> <a title="id:005">conifer</a>                     <ul>                         <li id="10"> <a title="id:10">pine tree</a>                         </li>                     </ul>                 </li>                            </ul>         </li>     </ul> </div> 

i want access value of title attributes of a-tags inside div-container id="firstdiv" on click. tried following jquery function didn't work:

$("#firstdiv").children("a").on('click', function () { /*some code here*/ }); 

any ideas i'm doing wrong?

children() goes 1 deep try find()

$("#firstdiv").on('click', function () {     $(this).find('a').each(function(){         console.log($(this).attr('title'))     }) }); 

will a tags titles when #first_div clicked

$("#firstdiv a").on('click', function () {     console.log($(this).attr('title')) }); 

will title of a tag clicked on