锚标签不能正常表达答案

【问题标题】：Anchor tag does not work properly express锚标签不能正常表达
【发布时间】：2020-07-27 22:25:28
【问题描述】：

当我点击 p 时，什么都没有发生，但是当我点击 div 的任何其他部分时它工作正常。我不知道为什么会这样。请帮助我。

<%- include('./partials/header');-%>
<%- include('./partials/flash');-%>
<% posts.forEach(function(post){ %>
<a href="/post/<%= post._id %>" id="posta">
<div id="post">
<h3 class="text-dark" id="title"><%- post.Title %></h3>
<p class="text-secondary" id="date"><small><%=post.Author.name %><br>
<%=post._id.getTimestamp().toLocaleDateString()%></small></p>
<p class="h6 text-dark" id="Postcontent"><%- post.Content.substring(0,200)+"..." %><span class="h6 text-success">Read more</span>
</p>
</div>
</a>
<span id="border"></span>
<% }) %>
<%- include('./partials/footer');-%>

我使用的css：

#post:hover{
    box-shadow:  0 5px 5px 0 #4CAF50;
    text-decoration: none;
}
#posta:hover {
  text-decoration: none;
}
#posta:link {
    text-decoration: none;
  }
  
#posta:visited {
    text-decoration: none;
  }
#Postcontent{
  font-size: 1rem; 
  white-space: pre-wrap;
}

更新：这很奇怪，但我观察到的是，当我点击第一个项目的 p 时它不起作用，但对于所有其他项目它都起作用。

网站链接： https://enlightening-blog.herokuapp.com/

【问题讨论】：

对我来说效果很好。它周围是否有其他代码干扰？
您关闭 <p> 的 Read more 标记未正确关闭
@abney317。感谢您指出错误。尽管纠正了错误，但我遇到了同样的问题。
@Kerri 抱歉回复晚了。我会发布完整的代码。
请也粘贴以 html 呈现的输出，以便我们为您提供帮助

标签： javascript html jquery css ejs

【解决方案1】：

根据您的代码。问题在于您编写 js 代码的方式。问题出在问题中提到的其他地方（感谢链接）。您犯的错误是新手错误之一（永远不要将静态 id 放入循环中）。 id是一样的。根据 js 的工作方式，它会寻找唯一的 id，但重复的类也可以。所以你当前的代码是

document.getElementById("Postcontent").addEventListener("click", function(event){
  event.preventDefault();
  });

将Postcontent从id改为class并添加如下代码

var postcontent = document.querySelectorAll(".Postcontent");
postcontent.addEventListener('click', function(event){
   event.preventDefault();
});

【讨论】：

非常感谢！

【解决方案2】：

@rajesh-paudel 提到了一个小错误但很重要。

 Never user static ids in loops.

此代码违反标准，因此不正确。它会失败验证检查，它应该。

ID 必须是唯一的。在这里阅读：HTML 4.x Specification 为HTML 5

When specified on HTML elements, the id attribute value must be 
unique amongst all the IDs in the element's tree and must contain at 
least one character. The value must not contain any ASCII whitespace.

【讨论】：