本文讲解如何通过事件委托解决动态添加的按钮无法触发点击事件的问题，确保每次新增的按钮都能正确调用同一处理函数。

在 jQuery 中，直接使用 $(".add-row").click(...) 绑定事件时，jQuery 仅会为当前已存在于 DOM 中的匹配元素绑定监听器。因此，首次渲染的 .add-row 按钮可以正常响应点击，但后续通过 JavaScript 动态插入的新按钮（尽管拥有相同 class）并未被绑定事件，导致点击无反应。

根本解决方案是采用 事件委托（Event Delegation）：将事件监听器绑定在某个静态存在的、不会被移除的祖先容器上，并指定事件应“代理”给符合选择器（如 '.add-row'）的后代元素触发。

✅ 正确写法（推荐）：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

$(document).ready(function() {
  // 使用事件委托：监听 document 上所有冒泡至它的 '.add-row' 点击事件
  $(document).on('click', '.add-row', function() {
    // 生成唯一标识（示例中补全原逻辑缺失的 button_identifier）
    const index = $('.add-row').length; // 当前总按钮数，用作索引
    const buttonIdentifier = `add_row-${index}`;

    // 在最后一个 .add-row 所在的 <div> 后插入新结构
    $(this).closest('div').after(`
      <div>
        <label for="${buttonIdentifier}"></label><br>
        <button type="button" class="add-row">Add Another Item</button>
      </div>
    `);
  });
});

? 关键说明：

• $(document).on('click', '.add-row', handler) 表示：当任意 .add-row 元素（无论何时加入 DOM）触发 click 事件并向上冒泡到 document 时，执行 handler。
• 更优实践：避免直接绑定到 document，改用最近的静态父容器（例如 <form id="item-form">），提升性能：

  $('#item-form').on('click', '.add-row', function() { ... });

• 注意 HTML 结构闭合：原问题代码中模板字符串末尾多了一个 </div>，已修正为语义正确的嵌套结构。
• $(this).closest('div') 确保新按钮插入在当前按钮所在 <div> 之后，逻辑更健壮，避免因 .last().after(...) 在多个同级 .add-row 时产生歧义。

? 总结：动态内容 + 事件绑定 = 必须用事件委托。这是前端开发中处理“未来元素”的标准范式，不仅适用于按钮，也广泛用于表格行、列表项、模态框等场景。