My code (the html page):

<nav>
    <ul>
        <li id="homeLink"><a href="#">Home</a></li>
        <li id="rekenLink"><a href="#">Rekenmachine</a></li>
        <li id="bakkerLink"><a href="#">Parkeergarage</a></li>
        <li id="garageLink"><a href="#">Bij de bakker</a></li>
    <ul>
</nav>  

The javascript/jquery behind it:

$(function () {
    $("ul").click(function () {
        // here I want to get the clicked id of the li (e.g. bakkerLink)
    });
});

How do I do that?

My code (the html page):

<nav>
    <ul>
        <li id="homeLink"><a href="#">Home</a></li>
        <li id="rekenLink"><a href="#">Rekenmachine</a></li>
        <li id="bakkerLink"><a href="#">Parkeergarage</a></li>
        <li id="garageLink"><a href="#">Bij de bakker</a></li>
    <ul>
</nav>  

The javascript/jquery behind it:

$(function () {
    $("ul").click(function () {
        // here I want to get the clicked id of the li (e.g. bakkerLink)
    });
});

How do I do that?

• javascript
• jquery
• listitem

• 2 I am pretty sure this has been asked and answered hundreds of times, you should try and search previously asked questions (or look at some simple jQuery examples) before posting a question. – jbabey Commented Mar 15, 2012 at 19:02

7 Answers 7

Use the .on() method with signature $(mon_parent).on(event_name, filter_selector, event_listener).

Demo: http://jsfiddle/gLhbA/

$(function() {
    $("ul").on("click", "li", function() {
        // here I want to get the clicked id of the li (e.g. bakkerLink)
        var id = this.id;
        alert(id);
    });
});

Another method is to bind the event to li instead of ul:

$(function() {
    $("li").click(function() {
        // here I want to get the clicked id of the li (e.g. bakkerLink)
        var id = this.id;
        alert(id);
    });
});

Use jQuery on() instead of click and pass li as selector.

$(function() {
    $("ul").on('click', 'li', function() {
        //Here this will point to the li element being clicked
        alert(this.id);
    });
});

on() reference - http://api.jquery./on/

$(function() {
    $("li").click(function() {
        alert(this.id);
    });
});

edit: jsfiddle link

Handle the click event of the <li> instead of the <ul>.
You can then get this.id.

Use the event's target (The anchor that was clicked) and then grab its parent's id:

$(function() {
    $("ul").click(function(e) {
        alert(e.target.parentNode.id);
    });
});

JSFiddle

here is one of the way to do. Make sure your using the latest jquery file.

 $("ul li").on('click', function() {
    console.log($(this).attr("id"));
});

You may try

$(function () {
    $("li").click(function () {
        var id = $(this).attr("id");
        alert(id);
    });
});

or

$(document).ready( function() {
    $("li").click(function () {
        var id = $(this).attr("id");
        alert(id);
    });
});