点击添加的div无法通过按钮切换隐藏？jQuery事件问题求助

兄弟我太懂你这个坑了！当初刚用jQuery的时候也踩过一模一样的雷——你一开始用的普通事件绑定（比如$('.btn').click(...)）只会给页面加载时就存在的DOM元素绑定事件，后来通过Mustache生成的.main-grant-access这类动态元素根本没被纳入事件监听范围，所以再次点击按钮时自然没法触发移除逻辑。

解决这个问题的核心就是用事件委托（Event Delegation）：把事件绑定到一个始终存在的父元素上，让父元素去“监听”子元素的事件触发——哪怕子元素是后来动态添加的也没关系，因为事件会通过DOM冒泡机制传递到父元素那里。

下面给你一个完整的可运行示例，包含按钮样式切换、Mustache模板渲染、动态元素的显示/隐藏切换逻辑：

// 先定义你的Mustache模板内容
const grantAccessTemplate = Mustache.render(`
  <div class="main-grant-access">
    <h3>动态生成的授权内容</h3>
    <p>这是通过Mustache模板渲染出来的内容</p>
  </div>
`);

// 用事件委托绑定按钮点击事件，绑定到静态父元素（推荐用最接近的静态容器，比如#dynamic-container）
$('#dynamic-container').on('click', '.toggle-btn', function() {
  const $btn = $(this);
  const $container = $('#dynamic-container');
  const $dynamicContent = $container.find('.main-grant-access');

  // 判断动态内容是否存在，实现切换逻辑
  if ($dynamicContent.length === 0) {
    // 不存在则追加模板内容
    $container.append(grantAccessTemplate);
    // 切换按钮样式（比如添加active类）
    $btn.addClass('btn-active').text('隐藏授权内容');
  } else {
    // 存在则移除动态内容
    $dynamicContent.remove();
    // 还原按钮样式
    $btn.removeClass('btn-active').text('显示授权内容');
  }
});

关键细节说明： #

• 为什么用$('#dynamic-container').on(...)？
  这里把事件绑定到了页面加载时就存在的#dynamic-container上，而不是直接绑定到按钮或动态元素。当点击.toggle-btn时，事件会冒泡到#dynamic-container，父元素会检查触发事件的元素是否匹配.toggle-btn选择器，匹配就执行回调——不管这个按钮是初始就有还是后来动态生成的都能生效。
• 尽量选择最接近的静态父容器：别直接绑定到document，虽然也能用，但会增加事件冒泡的层级，影响性能。找一个包裹动态元素的、页面加载时就存在的父元素是最优解。
• 状态判断逻辑：通过$container.find('.main-grant-access').length检查动态内容是否存在，确保每次点击都能准确切换显示/隐藏状态。

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