使用AJAX和EJS时仅首个按钮触发事件的问题排查

我通过for循环在页面中渲染多个EJS模板，每个模板包含一个“Edit Call”链接，点击该链接需要切换对应模板内复选框区域的显示/隐藏状态。我尝试用JavaScript给链接添加事件监听器，但只有页面上第一个模板的链接能触发事件。

EJS模板代码 #

<link rel="stylesheet" href="../css/categorieslist.css">

<article class="post-item" id="<%= user.UserID %>" data-userId="<%= user.UserID %>">
  <p>
      <%= user.Email %>
      <input type="hidden" class="hiddenField" id="userid" name="userid" value="<%= user.UserID %>" required>
      <p><%= user.UserID %></p>
      <a class="btn catbtn" href="/admin-usercategories/<%= user.UserID %>/edit">Edit Call</a> 
      <div class="categorieslist">
         <% for (const cat of categories) { %>
          <p>
            <input type="checkbox" id="<%= cat.CategoryID %>" value="<%= cat.CategoryID %>">
            <label for="<%=cat.CategoryID %>"><%= cat.CategoryName %></label>
          </p>
          <% } %>
        </div>
     </p>
</article>
<script type="text/javascript" src="/javascript/usercategories.js" charset="utf-8"></script>

原JavaScript代码 #

const btn = document.querySelector(".catbtn");
const displayElement = document.querySelector(".categorieslist");

btn.addEventListener('click', function() {
    fetchUserCategories();
});

async function fetchUserCategories() {
    if (displayElement.style.display === "none") {
        displayElement.style.display = "block";
    } else {
        displayElement.style.display = "none";
    }
}

• document.querySelector(".catbtn")仅返回页面中第一个匹配.catbtn的元素，因此只有第一个按钮绑定了事件；同理document.querySelector(".categorieslist")也只获取第一个复选框区域，即便多个按钮能触发，也只会操作第一个区域。
• 原代码未阻止链接的默认跳转行为，点击链接会直接跳转到href指定地址，导致切换效果无法正常展示。

推荐使用事件委托处理，既解决当前静态渲染的问题，后续动态添加模板也能生效；也可选择获取所有按钮逐个绑定事件。

方法1：事件委托（推荐） #

利用事件冒泡，将监听器绑定到父容器（或document），判断触发事件的元素是否为.catbtn，再定位对应模板内的复选框区域进行切换。

修改后的JavaScript代码：

// 绑定到document，或更具体的父容器（比如所有post-item的父元素）
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('catbtn')) {
        e.preventDefault(); // 阻止链接默认跳转
        // 定位当前按钮所在的模板容器，再获取对应的复选框区域
        const postItem = e.target.closest('.post-item');
        const displayElement = postItem.querySelector('.categorieslist');
        
        // 切换显示状态
        displayElement.style.display = displayElement.style.display === 'none' ? 'block' : 'none';
    }
});

方法2：获取所有按钮逐个绑定事件 #

若模板均为静态渲染，可获取所有.catbtn元素，循环为每个按钮绑定事件，同时定位对应区域。

修改后的JavaScript代码：

const btns = document.querySelectorAll(".catbtn");

btns.forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        // 定位当前按钮对应的复选框区域
        const postItem = this.closest('.post-item');
        const displayElement = postItem.querySelector('.categorieslist');
        
        // 切换显示状态
        displayElement.style.display = displayElement.style.display === 'none' ? 'block' : 'none';
    });
});

• 使用closest('.post-item')可精准定位当前按钮所在的模板容器，确保操作的是对应模板内的复选框区域，不会影响其他模板。
• 必须添加e.preventDefault()阻止链接默认跳转，否则点击链接会直接跳转到指定页面，无法看到切换效果。

内容的提问来源于stack exchange，提问作者kbdev