jQuery onclick event for li tags

Question

I have the following menu items generated by a template generator  artisteer    lt ul class  art-vmenu  gt    lt li gt  lt a href      gt  lt span class  l  gt  lt  span gt  lt span class  r  gt  lt  span gt           lt span class  t  gt Home lt  span gt  lt  a gt  lt  li gt       lt li gt  lt a href      gt  lt span class  l  gt  lt  span gt  lt span class  r  gt  lt  span gt           lt span class  t  gt Create User lt  span gt  lt  a gt  lt  li gt    lt li gt  lt a href     class  active  gt  lt span class  l  gt  lt  span gt  lt span class  r  gt  lt  span gt           lt span class  t  gt List Users lt  span gt  lt  a gt  lt  li gt     lt li gt  lt a href     gt  lt span class  l  gt  lt  span gt  lt span class  r  gt  lt  span gt           lt span class  t  gt Admin lt  span gt  lt  a gt  lt  li gt      lt  ul gt    I want to capture the onclick event for  lt li gt  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

User · Accepted 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

User · Answer

document  ready function            ul art-vmenu li   live  click   function             alert   this  text                   jsfiddle  http   jsfiddle net ZpYSC   jquery documentation on live    http   api jquery com live      Description  Attach a handler to the event for all elements which match the current selector  now and in the future

User · Answer

I m not really sure what your question is  but to get the text of the li element you can use     this  text     And to get the id of an element you can use  attr  id     Once you have a reference to the element you want  e g    this   you can perform any jQuery function on it

User · Answer

You can get the ID  or any other attribute  using jQuery s attrib function      ul art-vmenu li   attrib  id      To get the menu text  which is in the t span  you can do this      ul art-vmenu li   children  span t   html      To change the HTML is just as easy      ul art-vmenu li   children  span t   html  I m different      Of course  if you wanted to get all the span t s in the first place  it would be simpler to do      ul art-vemnu li span t   html      But I m assuming you ve already got the li s  and want to use child   to find something within that element

User · Answer

Typing in   this  will return the jQuery element instead of the HTML Element   Then it just depends on what you want to do in the click event   alert   this

User · Answer

In your question it seems that you have span selector with given to every span a seperate class into ul li option and then you have many answers  i e     document  ready function            ul art-vmenu li   click function e               alert   this  find  span t   text                  But you need not to use ul art-vmenu li rather you can use direct ul with the use of on as used in below example      document  ready function           ul art-vmenu   on  click   li   function         alert   this  find  span t   text

User · Answer

this is a HTML element    this  is a jQuery object that encapsulates the HTML element   Use   this  text   to retrieve the element s inner text   I suggest you refer to the jQuery API documentation for further information

[jquery] jQuery onclick event for <li> tags

Examples related to jquery