ejs模板上的触发事件？

Question

我有一个EJS脚本运行forEach生成html卡。我的console.log事件在我的ejs模板的第一个实例上起作用，但不适用于后续的模板。如何使事件侦听器在后续的侦听器上工作？

EJS代码段：

<form id="likesForm">
    <button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
    <%=i.likes%>
    <button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>

Client.js：

const likesForm = document.getElementById("likesForm");
likesForm.addEventListener("submit", () => {
    console.log("hi");
});

Answer 1

您之所以不选择一个，只能选择一个是因为ID必须是唯一的，并且由于重复而不能唯一。您必须将事件侦听器放在div之类的父元素中，然后使用它。

<div id="grabThis">
<form id="likesForm">
    <button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
    <%=i.likes%>
    <button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
</div>

将您的ejs更改为此：

const likesForm = document.getElementById("grabThis");
likesForm.addEventListener("submit", () => {
    console.log("hi");
});