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

dgoldfeder

我显示一个用户列表，在每个用户的末尾添加两个按钮，一个用于编辑，另一个用于删除用户，我的大问题是只有列表中第一个元素的按钮可以工作。

此代码显示我的列表

<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);
    });

}

我真的不知道该怎么办，因此任何建议都会受到赞赏。

dgoldfeder

感谢@Taplar和@ imvain2，我可以得到这个问题的答案并了解其工作原理。感谢大伙们！

这是最终代码

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);
    });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。