动态追加的Accordion按钮无交互功能问题求助

问题背景 #

我通过异步函数getStockResults从网络拉取数据，调用displayTickerResults()使用insertAdjacentHTML将内容追加到页面。插入的HTML结构与类名和页面现有div完全一致，但renderButts()函数仅对页面原有div内的按钮生效，新追加div中的按钮无交互功能。尝试过设置onclick调用renderButts()、调整该函数的调用位置，均未解决问题，项目使用Bootswatch作为CSS框架。

相关代码 #

const renderButts = function() {
    for (let i=0; i < accordBtns.length; i++) {
        accordBtns[i].addEventListener('click', function() {
            accordText[i].classList.toggle('collapse')
        })
    };
};

async function getStockResults(stock) {
    try {
        const tickRes = await fetch(`${baseURL}${stock}`);
        const tickerData = await tickRes.json();
        tickerData.forEach(val => {
            displayTickerResults(val);
        });
    } catch (error) {
        console.log(error);
    } finally {
        renderButts()
    }
}

const displayTickerResults = function(arr) {
    const tickerHTML = `<div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div  class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
      <div class="accordion-body">
            Stock price equals this. And the ticker is  boi!
         </div>
    </div>
  </div>`;
  accordContainer.insertAdjacentHTML('beforeend', tickerHTML);
};

解决方案 #

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

利用事件冒泡机制，给父容器绑定一次事件，就能处理所有静态和动态生成的按钮点击，避免重复绑定问题。

修改renderButts函数为事件委托模式，且只需在页面初始化时调用一次：

const renderButts = function() {
  // 给折叠容器绑定事件，无需循环
  accordContainer.addEventListener('click', function(e) {
    // 只处理折叠按钮的点击
    if (e.target.matches('.accordion-button')) {
      // 找到当前按钮对应的折叠内容
      const collapseContent = e.target.closest('.accordion-item').querySelector('.accordion-collapse');
      // 切换折叠状态
      collapseContent.classList.toggle('collapse');
      // 同步切换按钮的collapsed类，符合Bootstrap样式逻辑
      e.target.classList.toggle('collapsed');
    }
  });
};

// 页面初始化时调用一次即可
document.addEventListener('DOMContentLoaded', renderButts);

方法2：动态生成后直接绑定事件

在插入新HTML后，立即获取刚生成的元素并绑定事件，不依赖全局静态元素集合：

const displayTickerResults = function(arr) {
  const tickerHTML = `<div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" aria-expanded="false">
        Accordion Item #1
      </button>
    </h2>
    <div class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
            Stock price equals this. And the ticker is boi!
         </div>
    </div>
  </div>`;
  
  // 插入新内容
  accordContainer.insertAdjacentHTML('beforeend', tickerHTML);
  
  // 获取刚生成的元素
  const newItem = accordContainer.lastElementChild;
  const newBtn = newItem.querySelector('.accordion-button');
  const newContent = newItem.querySelector('.accordion-collapse');
  
  // 绑定点击事件
  newBtn.addEventListener('click', function() {
    newContent.classList.toggle('collapse');
    newBtn.classList.toggle('collapsed');
  });
};

此方法无需再调用renderButts函数。

方法3：复用Bootstrap原生折叠组件（贴合技术栈）

因为项目基于Bootswatch（Bootstrap），直接使用Bootstrap原生Collapse组件，既能保证交互一致性，又能解决原代码的ID冲突问题：

const displayTickerResults = function(arr) {
  // 给每个折叠内容生成唯一ID，避免冲突
  const uniqueId = `collapse-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  
  const tickerHTML = `<div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${uniqueId}" aria-expanded="false" aria-controls="${uniqueId}">
        Accordion Item #1
      </button>
    </h2>
    <div id="${uniqueId}" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
            Stock price equals this. And the ticker is boi!
         </div>
    </div>
  </div>`;
  
  accordContainer.insertAdjacentHTML('beforeend', tickerHTML);
  
  // 初始化新生成的折叠组件
  const collapseElement = document.getElementById(uniqueId);
  new bootstrap.Collapse(collapseElement);
};

此方法无需自定义renderButts，完全依赖Bootstrap原生功能，同时修复了原代码中所有新元素共用同一ID的逻辑错误。

原代码核心问题总结 #

1. 全局选择器未更新：accordBtns、accordText是页面加载时获取的静态集合，动态生成的元素不会自动加入，导致循环时无法找到新按钮。
2. 重复绑定风险：多次调用renderButts会给旧按钮重复添加事件，触发多次toggle。
3. ID冲突：所有新元素的data-bs-target都指向#collapseOne，导致点击任意按钮都控制同一个折叠内容。

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