Need help with selecting the children of a list item in a jQuery mobile navigation? I am having some trouble with this task. Here is a fiddle demonstrating what I have done so far: http://jsfiddle.net/jhrz9/
<div data-role="panel" id="left-panel" data-theme="a" data-display="push">
<ul class="left-nav" data-icon="" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="#">Adam Kinkaid</a><div class="helperText">Helper Text</div></li>
<li><a href="#">Alex Wickerham</a></li>
<li><a href="index2.html">Avery Johnson</a></li>
<li><a href="index.html">Bob Cabot</a></li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
</div><!-- /panel -->
The JavaScript code I've tried to use is as follows:
$('ul.left-nav li').click(function(){
alert($(this).children('.helperText').html());
});
I also attempted this alternative method:
$('#left-panel ul li').click(function(){
alert($(this).children('.helperText').val());
});