在ul javascript / jquery中返回单击的li类

My code (the html page):

我的代码（html页面）：

<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:

它背后的javascript / jquery：

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

How do I do that?

我怎么做？

7 个解决方案

#1

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

使用带有签名$（common_parent）.on（event_name，filter_selector，event_listener）的.on（）方法。

Demo: http://jsfiddle.net/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:

另一种方法是将事件绑定到li而不是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);
    });
});

#2

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

使用jQuery on（）而不是click并将li作为选择器传递。

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

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

on（）参考 - http://api.jquery.com/on/

#3

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

edit: jsfiddle link

编辑：jsfiddle链接

#4

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

处理

的click事件而不是

。然后你可以得到this.id.

的点击事件而不是。然后你可以得到this.id.

#5

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

使用事件的目标（已单击的锚点）然后获取其父级ID：

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

JSFiddle

的jsfiddle

#6

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

这是其中一种方法。确保使用最新的jquery文件。

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

#7

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);
    });
});