Rückgabe der angeklickten li-Klasse in einer ul javascript/jquery

Question

Mein Code (die html-Seite):

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

Das Javascript/jquery dahinter:

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

Wie kann ich das tun?

Answer 1

Verwenden Sie die .on() Methode mit Signatur $(common_parent).on(event_name, filter_selector, event_listener) .

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

Eine andere Methode ist die Bindung des Ereignisses an li anstelle von 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

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

bearbeiten: jsfiddle link

Answer 3

JQuery verwenden on() anstelle von click und passieren li als Selektor.

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

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

Answer 4

Behandeln Sie die click Veranstaltung des <li> anstelle der <ul> .
Sie können dann this.id .

Answer 5

Verwenden Sie das Ziel des Ereignisses (der Anker, der angeklickt wurde) und nehmen Sie dann die ID des übergeordneten Elements:

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

JSFiddle