javascript - 动态表内的按钮仅执行一次 JQuery 函数

Question

我正在使用 PHP 创建一个带有 while 循环的表，从该表中的数据库中拖动数据，我有 2 个按钮，一个用于删除，另一个用于编辑。

HTML:

<div id="divCenter" class="box">
    <div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
        <img src="../../images/logo.png" width="142" height="33">
    </div>
    <div id="mainDiv">
        <div id="navi"></div>
        <div id="infoi"></div>
        <table id="hor-minimalist-b">
            <div id="bgDimmer"></div>
            <div id="divContent"></div>
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Team</th>
                <th scope="col">Created By</th>
                <th scope="col">Created Date</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <?php while ($row = $getUsersQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <tr>
                    <td id="uId"><?php echo $row["uId"]; ?></td>
                    <td id="fName"><?php echo $row["fName"]; ?></td>
                    <td id="lName"><?php echo $row["lName"]; ?></td>
                    <td id="team"><?php echo $row["uTeam"]; ?></td>
                    <td id="cBy"><?php echo $row["createdBy"]; ?></td>
                    <td id="uCd"><?php echo $row["uCreateDate"]; ?></td>
                    <td><input type="button" name="uEdit" id="uEdit" value="Edit" /></td>
                    <td><a href="deleteUser.php?id=<?php echo $row["uId"] ?>"><input type="button" name="uDelete" id="uDelete" value="Delete" /></a></td>
                </tr>
            <?php } ?>
            </tbody>
        </table>
    </div>
</div>

我的编辑按钮由触发弹出窗口的 JQuery 函数监视。

JQuery:

$(document).ready(function () {
    $('#uEdit').click(function (){
        $('#bgDimmer').toggle();
        $('#divContent').toggle().load('editUser.php');
    });
});

问题是，当绘制表格时，只有第一行编辑按钮将执行该功能，我是否必须添加一个 onclick 才能使其工作，我真的很想避免，但如果需要的话我会这样做。

希望我的问题很清楚，有人可以阐明我的问题。

Answer 1

我建议使用按钮的类，而不是使用元素的 id(因为 id 必须是唯一的且不重复)。

<td><input type="button" class="buttonClassName" name="uEdit" id="uEdit" value="Edit" /></td>

和 Jquery :

$(document).ready(function () {
  $('.buttonClassName').click(function (){
     $('#bgDimmer').toggle();
     $('#divContent').toggle().load('editUser.php');
  });
});