为什么我不能将 JS 事件应用于我的 EJS 代码？

Question

我想对我的 EJS 文件中的图像应用单击事件，这是 EJS 代码：

<div class="container" id="comments">
<div class="row">
<div class="col-lg-12">
<div class="well">
<div id="scrollit">
<% greword.Comments.forEach(function(comment){ %>
<strong><p id="author"><%= comment.author %></p></strong>
<i id="likesi" class="far fa-thumbs-up"></i><span id="likes"><%= comment.likes %></span>
<i id="dislikesi" class="far fa-thumbs-down"></i><span id="dislikes"><%= comment.dislikes %></span>
<span class="pull-right">10 days ago</span>
<p>
<%= comment.text %>
</p>
<% }) %>

这是我的JS代码：

$("#comments .row .col-lg-12 .well #scrollit").on("click", "#dislikesi", function(){
console.log("OK");
});

我已经检查了我的 ejs 文件是否已成功链接到 JS 文件。但奇怪的是，它不起作用。我想不通，有人能帮我吗？多谢！

//***********************************************更新！！！***********************************************//

我意识到我误用了 ID，因为 forEach 函数会生成多个 ID。所以我改变了我的代码。这是我的新 ejs 代码 forEach 函数：

<% greword.Comments.forEach(function(comment, index){ %>
<strong><p id="author"><%= comment.author %></p></strong>
<i class="far fa-thumbs-up"></i><span class="likes"><%= comment.likes %></span>
<i class="far fa-thumbs-down <%= index %>"></i><span class="dislikes"><%= comment.dislikes%></span>
<%= index %>
<span class="pull-right">10 days ago</span>
<p>
<%= comment.text %>
</p>
<% }) %>

我将其用作JS代码：

$("#comments #scrollit").on("click", ".2", function(){
console.log("OK");
});

为了点击第三条评论的不喜欢图片。但它仍然不起作用。

//***********************************************更新！！！***********************************************//

非常感谢"LGSon"，我的代码终于正常工作了。

Answer 1

问题编辑后更新

一个类不能只是一个数字，就像2一样，因此.2不能用作选择器，它需要例如idx2.

下面确切地显示了您需要做什么，以制作所有例如 单击dislikesi按钮时会触发，就像具有索引的唯一类一样，只有一个按钮会触发，因为只有一个项目具有该值。

---

原答案

看起来，您的代码重复了一组未知的元素，并且由于其中几个元素具有固定的id，因此您的选择器将无法正常工作，因为id被认为是唯一的。

如果id不能是唯一的，请使用属性选择器[attribute='value']来定位它们，例如

$("#scrollit").on("click", "[id='dislikesi']", function(){
console.log("OK");
});

---

另一种选择是改用该元素类型和类名，例如

$("#scrollit").on("click", "i.fa-thumbs-down", function(){
console.log("OK");
});

---

此外，由于id被认为是唯一的，您可以使用第二个参数索引来制作它们forEach例如，像这样的东西id="likesi<%= index %>"

<% greword.Comments.forEach(function(comment,index){ %>
<strong><p id="author"><%= comment.author %></p></strong>
<i id="likesi<%= index %>" class="far fa-thumbs-up"></i><span id="likes"><%= comment.likes %></span>
<i id="dislikesi<%= index %>" class="far fa-thumbs-down"></i><span id="dislikes"><%= comment.dislikes %></span>
<span class="pull-right">10 days ago</span>
<p>
<%= comment.text %>
</p>
<% }) %>