动态创建的accordion元素未绑定事件监听器，求原因

这是个很常见的动态元素事件绑定问题，我来帮你拆解原因和对应的解决办法：

为什么动态创建的元素无法绑定事件？ #

主要有两个核心原因：

1. 执行时机错误
   你的addPanels()调用放在了API请求的done回调外部。API请求是异步操作——当addPanels()执行时，浏览器还没完成API数据的获取，更没把动态创建的.accordion元素添加到DOM里。此时document.getElementsByClassName("accordion")只能获取到页面初始加载时就存在的元素，自然没法给还没出生的动态元素绑定事件。

2. 直接绑定的局限性
   就算你把addPanels()移到done回调里，也只能解决当前这次动态创建元素的绑定问题。如果之后还有新的.accordion元素被动态添加（比如用户触发其他操作创建），你还得再调用一次addPanels()，非常繁琐。

解决方案 #

方案一：修正执行时机（快速解决当前场景） #

把addPanels()移到done回调的末尾，确保所有动态元素都已经被添加到DOM之后，再执行事件绑定：

$(document).ready(function() {
  api.routines.getRoutines().done(function(data) {
    $.each(data, function(i, item){
      var list = document.getElementById("routines_list");
      var acc = document.createElement("div");
      acc.setAttribute("class", "accordion");
      var panel = document.createElement("div");
      panel.setAttribute("class", "panel");
      // 你的其他元素创建逻辑...
      
      acc.appendChild(panel);
      list.appendChild(acc);
    });
    // 关键：移到这里，等所有动态元素都加入DOM后再绑定事件
    addPanels();
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // 错误处理代码
  });
});

方案二：事件委托（推荐，一劳永逸） #

事件委托利用DOM的事件冒泡机制，把事件监听器绑定到一个已经存在的父元素上（比如你的#routines_list），而不是直接绑定到动态元素上。这样不管什么时候创建新的.accordion元素，点击事件都会通过冒泡被父元素捕获并处理。

jQuery实现（简洁易用）

直接用jQuery的.on()方法实现事件委托，同时可以去掉addPanels()函数：

$(document).ready(function() {
  // 事件委托：监听#routines_list下所有.accordion的点击
  $("#routines_list").on("click", ".accordion", function() {
    var panel = this.nextElementSibling;
    // 切换panel显示状态
    panel.style.display = panel.style.display === "block" ? "none" : "block";
    // 切换箭头图标
    var arrow = this.children[0].children[0];
    arrow.src = panel.style.display === "block" ? "Iconos/arrow_up.png" : "Iconos/arrow_down.png";
  });

  // API请求逻辑不变
  api.routines.getRoutines().done(function(data) {
    $.each(data, function(i, item){
      var list = document.getElementById("routines_list");
      var acc = document.createElement("div");
      acc.setAttribute("class", "accordion");
      var panel = document.createElement("div");
      panel.setAttribute("class", "panel");
      // 你的其他元素创建逻辑...
      
      acc.appendChild(panel);
      list.appendChild(acc);
    });
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // 错误处理代码
  });
});

原生JS实现（无依赖）

如果不想用jQuery，也可以用原生JS的事件委托：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到父元素#routines_list
  document.getElementById('routines_list').addEventListener('click', function(e) {
    // 检查点击的元素是否属于.accordion
    const targetAccordion = e.target.closest('.accordion');
    if (targetAccordion) {
      var panel = targetAccordion.nextElementSibling;
      // 切换panel显示状态
      panel.style.display = panel.style.display === "block" ? "none" : "block";
      // 切换箭头图标
      var arrow = targetAccordion.children[0].children[0];
      arrow.src = panel.style.display === "block" ? "Iconos/arrow_up.png" : "Iconos/arrow_down.png";
    }
  });

  // API请求逻辑不变
  api.routines.getRoutines().done(function(data) {
    $.each(data, function(i, item){
      var list = document.getElementById("routines_list");
      var acc = document.createElement("div");
      acc.setAttribute("class", "accordion");
      var panel = document.createElement("div");
      panel.setAttribute("class", "panel");
      // 你的其他元素创建逻辑...
      
      acc.appendChild(panel);
      list.appendChild(acc);
    });
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // 错误处理代码
  });
});

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