JS 函数 addEventListener 仅适用于我的列表的第一个元素

Question

我显示一个用户列表，并在每个用户的末尾添加 2 个按钮，一个用于编辑，另一个用于删除用户，我的大问题是只有列表中第一个元素的按钮起作用。此代码显示我的列表<tbody>            <?php for( $i = 0; $i < count($users->datos); $i++ ): ?>                <tr>                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["email"  ]; ?></td>                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["paterno"]; ?></td>                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["materno"]; ?></td>                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["nombre" ]; ?></td>                    <td style="padding: 0 20px;">                        <?php                        echo preg_replace(PHONE_NUMBER, "($1) $2-$3", $users->datos[$i]["movil"]);                        ?>                    </td>                                        <td id="botones">                        <form id="ed" method="POST">                            <input  type="hidden" id="token" name="token" value="<?php echo $users->datos[$i]["tokenA"]; ?>">                                                        <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonDelete"><i class="fas fa-trash-alt"></i></button>                            <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonEdit"  ><i class="fas fa-edit"     ></i></button>                        </form>                    </td>                </tr>            <?php endfor; ?>        </tbody>这是我的 JavaScript 代码const formEditDel = document.querySelector('form#ed');const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')eventListeners();function eventListeners(event) {    userDel.forEach(button => {        button.addEventListener('click', markDeleted);    });    userEdit.forEach(button => {        button.addEventListener('click', userEdited);    });}我真的不知道该怎么办，所以任何建议将不胜感激。

Answer 1

由于每一行都包含一个单独的表单，因此使用 id 来选择它们只会选择第一个。

所以，你可以替换这个

const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')
const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')

有了这个

const userDel = document.querySelectorAll('[class="buttonDelete"]')
const userEdit = document.querySelectorAll('[class="buttonEdit"]')

或者你可以替换这个

<form id="ed" method="POST"> ... </form>

有了这个

<form class="ed" method="POST"> ... </form>

然后使用类选择表单

const formEditDel = document.querySelector('form.ed');

Answer 2

这是最终的代码

const userDel  = document.querySelectorAll('.buttonDelete');

const userEdit = document.querySelectorAll('.buttonEdit');

eventListeners();

function eventListeners(event) {

    userDel.forEach(buttonDel => {

        buttonDel.addEventListener('click', markDeleted);

    });

    userEdit.forEach(buttonEdit => {

        buttonEdit.addEventListener('click', userEdited);

    });

}