Question

我有一个文本字段，用户可以搜索姓氏。当他们开始输入时，通过php / ajax对数据库进行搜索。然后，它会在无序列表中显示名称。此时，如果您点击<li>，我只是想提醒该用户的ID。

用于ajax调用的PHP：

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

如果我正确理解了这个问题，你需要使用数据而不是attr。

如果您使用attr，那么请告诉我id属性的值，但在您的代码中，id值实际上存储在data-id属性中。

尝试更改此行：

alert($(this).attr('id'));

对此：

alert($(this).data('id'));

或者：

alert($(this).attr('data-id'));

您可以在此处详细了解数据功能：https://api.jquery.com/data/

同样，当您通过AJAX向DOM添加元素时，click事件将起作用。您需要更改此行：

$("#myid li").click(function() {

对此：

$("#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>

无法从php / ajax搜索结果<ul>获取<li>值

2 个答案: