Question

I have a problem with nested li’s and grabbing the ID of the element clicked.

Assume this is my code:

<ul>
    <li id="folderLink_1">Link 1</li>
    <li id="folderLink_2">Link 2
        <ul>
            <li id="folderLink_3">Link 2.1</li>
            <li id="folderLink_4">Link 2.2</li>
        </ul>
    </li>
<ul>

I also have this jQuery:

$('[id^=folderLink_]').live('click',function(){
    alert($(this).attr('id'));
});

When I click on Link 1, I just get the one ID alerted to me, folderLink_1.
However when I click on link 2.1, not only do I get folderLink_3, but also folderLink_2 one after another.

I’ve looked around, and tried using the event.stopPropagation(), however this stops subsequent actions from taking place too which are needed.

The idea is, the folders act as an image library folder structure. When you click a folder, it saves the ID of that folder to a JS variable. When a folder with images contained within it is clicked, ajax retrieves a URL, using the ID in the querystring.

I have tried wrapping the text within the LI around a span, however that I have images around the text which need to act in the same way (if clicked save the ID).

I have attached images for better help.

Image One (Top Left): Click the menu item anywhere in the red section

Image Two (Top Right): When the link is clicked, the ID of that folder is saved, and another menu slides right

Image Three (Bottom Left): The new menu slides into where the old one was, and the folder name appears in the carbon fiber section at the top

When the new link (in image three) is clicked, not only does it load content in an area outside of the picture provided, but also records the ID of that LI clicked.

If anyone has any suggestions for getting this to only save the ID of the li clicked, it’d be greatly appreciated.

Answer 1

You should be using on(), as live() is deprecated, and e.target.id will give you the ID of the element that was actually clicked :

$(document).on('click', '[id^=folderLink_]', function(e){
    if (this===e.target) alert(e.target.id);
});

FIDDLE