Unable to get <li> value from php/ajax search results <ul> - php

Question

I have a text field whereby a user can search for a last name. When they start typing then a search is performed on the database via php/ajax. This then displays names in an unordered list. At this point I am just trying to alert the id of that user if you click on the <li>.
PHP for the ajax call:
if ($_POST) {
$search = "{$_POST['last_name']}%";
$stmt = $link->prepare("SELECT `first_name`, `last_name`, `id` FROM `employees` WHERE `last_name` LIKE ? LIMIT 7");
$stmt->bind_param("s", $search);
$stmt->execute();
$result = $stmt->get_result();
$numRows = $result->num_rows;
if ($numRows > 0) {
echo "<ul id='myid'>";
while ($row = $result->fetch_assoc()) {
$first_name = sanitize($row['first_name']);
$last_name = sanitize($row['last_name']);
$id = sanitize($row['id']);
echo "<li data-id='$id'>" . $last_name . " , " . $first_name . "</li>";
}
echo "</ul>";
}
else {
echo "No results found";
}
$stmt->close();
}
jQuery
$(document).ready(function(){
$( "#last_name" ).focus();
$( "#last_name" ).keyup(function(){
$( "#loading" ).show();
var last_name = $( "#last_name" ).val();
if(last_name.length > 2) {
$.ajax({
type: 'POST',
url: 'functions/employee-search.php',
data: {last_name: last_name},
success: function(data) {
if(!data.error) {
$( "#result" ).html(data);
$( "#loading" ).hide();
}
}
});
}
if(last_name.length < 1) {
$( "#result" ).html("");
$( "#loading" ).hide();
}
});
$("#myid li").click(function() {
alert($(this).attr('id'));
});
});
HTML
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Employee</label>
<input type="text" class="form-control" name="last_name" placeholder="Search by surname" id="last_name" autocomplete="off">
<div style="display:none" id=loading><img src="../plugins/images/ajax-loader.gif" /></div>
<div id="result"></div>
</div>
</div>
</div>

Answer 1

If I understand the issue correctly you need to use data rather than attr.
If you use attr you are saying, get me the value of the id attribute but in your code the id value is actually stored in the data-id attribute.
Try changing this line:
alert($(this).attr('id'));
To this:
alert($(this).data('id'));
Or:
alert($(this).attr('data-id'));
You can read more about the data function here: https://api.jquery.com/data/
Also as you are adding elements to the DOM via AJAX the click event will work. You need to change this line:
$("#myid li").click(function() {
To this:
$("#result").on('click', '#myid li', function() {

Answer 2

jquery
$("#myid li").click(function() {
console.log($(this).attr('id'));
console.log($(this).data('id'))
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myid">
<li id="one" data-id="1">one</li>
<li id="two" data-id="2">two</li>
<li id="three" data-id="3">three</li>
</ul>