查找被点击元素的ID？

Okay, I am not sure if this has been asked, exactly how I did, but sorry if yes.

Basically, I have 10 items in a list.

By running this query:

public function get10items()
{
    $this->query = $this->pdo->prepare("SELECT * FROM items LIMIT 10");
    $this->query->execute();

    while ($row = $this->query->fetch(PDO::FETCH_ASSOC))
    {
        echo '<li id="'.$row['id'].'">'.$row['name'].'</li><br />';
    }
}

This will list 10 items from the database into '<ul>'. This also will set an id to each item, with it's own number, like in the database.

Now, with jquery, I want the jquery to find the ID number of the clicked item.

For example our list:

Hello! [id55]
Hai! [id66]

I clicked on item 'Hello!'. How can I find out the ID of it upon click using jquery and then use it for future use? For example, sending ajax query, with that id, etc?

<ul class="list">
<?php echo $class->get10items(); ?>
</ul>

So basically I can use this:

$(".list").on("click", "li", function() {
    $.post("ajax.php", { get : this.id }, function() {
      blablabla
    });
});

Is that correct?

This will trigger for every ul with li on the page. You can drill down more if the ul has an ID.

//Using event delegation since not sure when these items are being added
$("ul").on("click", "li", function() {
    console.log(this.id);
});

Try this:

in PHP:

public function get10items()
{
$this->query = $this->pdo->prepare("SELECT * FROM items LIMIT 10");
$this->query->execute();
echo '<ul class='someClassName' id='someUniqueId'>';
while ($row = $this->query->fetch(PDO::FETCH_ASSOC))
{
    echo '<li id="'.$row['id'].'>'.$row['name'].'</li><br />';
}
echo '</ul>';
}

in jQuery:

Since you haven't posted your html code, I am delegating from document.

$(document).on('click'. '.someClassName > li', function() { // see the same class name "someClassName" is used here. 
//If you give some other class name in your PHP file, change here also.
 alert(this.id);//this.id is what you wanted.
});

You can also use id of the ul:

$(document).on('click'. '#someUniqueId > li', function() { // see the same id "someUniqueId" is used here, but with # prefixed. 
//If you give some other id in your PHP file, change here also.
 alert(this.id);//this.id is what you wanted.
});

Add a class to the li items like so :

echo '<li class = "list_item_class" id="'.$row['id'].'>'.$row['name'].'"</li><br />';

And then in jQuery :

$('.list_item_class').click(function(){
   console.log(this.id);
});

This will make sure only the class items will be chosen, saving you trouble later with ambiguous selectors.

Using jQuery to do this is really simple:

$('ul').on('click', 'li', function(e) {
    var id = e.target.id;
    // do your stuff with the id
});

event.target always refers to the element, that triggered the event.
So, event.target.id is the id you are looking for.

All you need is:

var clickedId;
$('li').click(function(){
    clickedId = $(this).attr('id');
});

clickedId will then contain the id of the clicked element.

Or you could use tymeJV's answer which delegates the handler to the UL parent - which would have better performance for larger lists.