嵌套Accordion动态表单问题：新增Sub-Topic后无法添加Course Skill/Title

问题根源在于jQuery事件绑定的局限性：页面加载时直接绑定的click事件仅对当时已存在的DOM元素生效，而你动态新增的Sub-Topic是后续插入页面的，这些新元素不会自动继承之前的事件绑定。

修复方案： #

1. 改用事件委托绑定点击事件
   放弃直接给按钮绑定事件，改为通过静态父容器（或document）委托事件，这样无论元素是初始存在还是动态生成，只要匹配选择器就能触发逻辑。

   错误写法（仅支持初始元素）：

   $('.add-course-btn').click(function() {
       // 你的添加逻辑
   });
   

   正确写法（支持动态元素）：

   // 优先用最接近的静态父容器替代document，提升性能
   $('#form-accordion-wrapper').on('click', '.add-course-btn', function() {
       // 获取当前按钮所属的Sub-Topic容器
       const $targetSubTopic = $(this).closest('.sub-topic-container');
       // 克隆Course Skill/Title的表单模板（假设模板有id="course-skill-template"）
       const $newCourseItem = $('#course-skill-template').clone().removeAttr('id');
       // 将新表单插入到当前Sub-Topic的列表中
       $targetSubTopic.find('.course-items').append($newCourseItem);
   });
   

2. 保证动态Sub-Topic的按钮选择器一致
   在Laravel Blade的Sub-Topic新增模板里，添加按钮必须带有和事件委托中匹配的类名，比如：

   {{-- 动态生成的Sub-Topic模板片段 --}}
   <div class="sub-topic-container accordion-item">
       <h3 class="accordion-header">
           <button class="accordion-button" data-bs-toggle="collapse">
               Sub-Topic {{ $index }}
           </button>
       </h3>
       <div class="accordion-collapse collapse show">
           <div class="accordion-body">
               {{-- Course Skill/Title列表容器 --}}
               <div class="course-items">
                   @include('components.course-skill-form')
               </div>
               {{-- 按钮类名必须和事件委托的选择器一致 --}}
               <button type="button" class="btn btn-primary btn-sm add-course-btn">
                   添加Course Skill/Title
               </button>
           </div>
       </div>
   </div>
   

3. 避免重复绑定事件
   确保事件委托代码只执行一次（比如放在$(document).ready()中），不要在新增Sub-Topic的逻辑里重复绑定，否则会导致点击一次触发多次执行。

核心原理 #

事件委托利用DOM事件冒泡特性：点击动态生成的按钮时，事件会冒泡到绑定了委托事件的静态父容器，父容器根据选择器判断是否触发处理逻辑，从而实现对动态元素的事件监听。

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