afshin afshin - 25 days ago 9
jQuery Question

jQuery onclick event for <li> tags

I have the following menu items generated by a template generator, artisteer:

<ul class="art-vmenu">

<li><a href="#" ><span class="l"></span><span class="r"></span>
<span class="t">Home</span></a></li>
<li><a href="#" ><span class="l"></span><span class="r"></span>
<span class="t">Create User</span></a></li>
<li><a href="#" class="active"><span class="l"></span><span class="r"></span>
<span class="t">List Users</span></a></li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">Admin</span></a></li>
</ul>


I want to capture the onclick event for
<li>
with a single jQuery function:
I've tried this which is incomplete:

$(document).ready(function()
{
$('ul.art-vmenu li').click(function(e)
{
alert(this);
});
});


I can go as far as seeing this is a HTMLliElement but cannot figure how to get the menu text or id for it?

How is menu click usually captured with jQuery?

Answer

Here, to get the text of the menu that triggered the event (does not seem to have any id):

 $(document).ready(function() 
 {
    $('ul.art-vmenu li').click(function(e) 
    { 
     alert($(this).find("span.t").text());
    });
 });
Comments