为什么我不能将我的 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。所以我改变了我的代码。这是我的 forEach 函数的新 ejs 代码：

<% 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

问题编辑后更新

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

下面准确地显示了您需要做的事情，例如dislikesi buttons 在点击时触发，与带有索引的唯一 class 一样，只有一个会触发，因为只有一个项目具有该值。

原回答

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

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

$("#scrollit").on("click", "[id='dislikesi']", function(){

  console.log("OK");

});

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

$("#scrollit").on("click", "i.fa-thumbs-down", function(){

  console.log("OK");

});

此外，由于 id 被认为是唯一的，您可以使用 forEach 第二个参数 index 来制作它们，例如像这样 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>
              <% }) %>

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

Why can't I apply my JS event to my EJS code?

javascript

click

ejs

node.js