возвращение щелкнувшего класса li в ul javascript / jquery

Question

Мой код (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>  

Javascript / JQuery за ним:

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

Как мне это сделать?

Answer 1

Используйте метод .on() с подписью $(common_parent).on(event_name, filter_selector, event_listener).

Демо: 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);
    });
});

Другой метод - привязать событие к 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);
    });
});

Answer 2

Используйте jQuery on() вместо click и передайте li в качестве селектора.

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

on() ссылка - http://api.jquery.com/on/

Answer 3

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

edit: jsfiddle link

Answer 4

Вы можете попробовать

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

или

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

Answer 5

вот один из способов сделать.Убедитесь, что вы используете последнюю версию файла jquery.

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

Answer 6

Используйте цель события (Якорь, по которому щелкнули), а затем выберите идентификатор его родителя:

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

JSFiddle

Answer 7

Обрабатывать событие click для <li> вместо <ul>.
Затем вы можете получить this.id.