Bootstrap Modal中使用jQuery AJAX更新数据获取错误ID的问题求助

问题根源 #

HTML 规范要求同一个页面内的id属性必须全局唯一，你的代码存在两个重复ID问题：

• while循环输出多条员工记录时，每条记录的a标签都用了相同的id="assign_csr"
• 每条记录里的两个隐藏input也用了相同的id="employeeId"和id="parent"
  当你用$("#employeeId").val()取值时，浏览器只会返回DOM树里第一个匹配该ID的元素的值，所以永远只能拿到第一条员工的id。

解决步骤 #

1. 修改PHP输出代码 #

把固定ID替换为class，同时把需要的参数直接绑定到点击元素的data-*属性上，写法更简洁：

if(isset($_POST['parent_id']))
{
    $parent_id = $_POST['parent_id'];
    $query = mysqli_query($conn, "SELECT * FROM employee WHERE role = 'SuperAdmin' OR role = 'csr' ");
    while ($row = mysqli_fetch_assoc($query))
    {
        extract($row);
        $csr_id = $employee_id;
        // id替换为class，参数存到data属性中
        echo "<a class='assign_csr' data-csr-id='$csr_id' data-parent-id='$parent_id'>
            <div class='modal-div'>
                <table width='100%'>
                    <tr>
                        <td><img src='../$employee_img' width='100' height='100' ></td>
                        <td><sub><sub>Assign To: <hr> </sub></sub> $employee_name <br> <sub><sub>$designation</sub></sub></td>
                    </tr>
                </table>
            </div>
        </a>";
    }
}

2. 修改点击事件取值逻辑 #

直接从当前点击的元素的data属性中读取对应值即可：

$(document).on("click",".assign_csr", function(){
    var parent_id = $(this).data("parent-id");
    var employee = $(this).data("csr-id");
    alert(employee);
});

如果你需要保留隐藏input的写法，只要把隐藏input的id替换为class，取值时相对于当前点击元素查找即可：
PHP修改input部分：

<input type='hidden' class='employeeId' value='$csr_id'>
<input type='hidden' class='parent' value='$parent_id'>

JS修改：

$(document).on("click",".assign_csr", function(){
    var parent_id = $(this).find(".parent").val();
    var employee = $(this).find(".employeeId").val();
    alert(employee);
});

内容的提问来源于stack exchange，提问作者Imran Shahzad