Finding the ID of the clicked element? - php

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.