如何通过jQuery从一个popover打开另一个popover？问题咨询

首先明确说：这不是jQuery不支持，而是你遇到了动态元素的事件绑定问题，这是前端开发里很常见的场景～

问题根源 #

当页面首次加载时，第一个Popover里的"Create new Label"元素还不存在于DOM中——它是在你点击按钮触发第一个Popover后才动态生成的。如果你直接用普通的$('.create-new-label').popover()去绑定事件，代码执行时这个元素还没被渲染，自然没法捕获到点击事件。

解决方案：事件委托（Event Delegation） #

我们可以把事件绑定到已经存在的父元素（比如document，或者更接近的容器，推荐后者以提升性能）上，让事件通过冒泡机制被父元素捕获，这样即使后续动态生成的元素也能触发事件。

举个具体的代码示例：

1. 确保第一个Popover允许HTML内容

首先配置第一个弹出框时，要开启html: true，否则里面的"Create new Label"会被当作纯文本渲染，点击事件无效：

// 第一个Popover的配置
$('.your-trigger-button').popover({
  title: 'Labels',
  content: '<div class="existing-label">Existing Label</div><div class="create-new-label">Create new Label</div>',
  html: true,
  trigger: 'click'
});

2. 用事件委托绑定第二个Popover

把点击事件绑定到document（或更接近的父容器）上，监听.create-new-label的点击：

// 第二个Popover的事件绑定（事件委托方式）
$(document).on('click', '.create-new-label', function() {
  const $this = $(this);
  
  // 避免重复初始化Popover
  if (!$this.data('bs.popover')) {
    $this.popover({
      title: 'Create New Label',
      content: '<input type="text" placeholder="Enter label name" class="label-input">',
      html: true,
      trigger: 'manual', // 手动控制显示，避免和点击触发冲突
      placement: 'right' // 可以调整第二个Popover的位置，避免和第一个重叠
    });
  }
  
  // 显示第二个Popover
  $this.popover('show');
});

额外优化：关闭其他Popover（可选）

如果需要点击其他区域关闭Popover，或者打开第二个时关闭第一个，可以添加额外的逻辑：

// 点击页面其他区域关闭所有Popover
$(document).on('click', function(e) {
  if (!$(e.target).closest('.popover').length && !$(e.target).hasClass('your-trigger-button') && !$(e.target).hasClass('create-new-label')) {
    $('.popover').popover('hide');
  }
});

总结 #

jQuery完全支持嵌套Popover的场景，核心问题就是动态元素的事件绑定方式——用事件委托替代直接绑定，就能让第一个Popover里的内容成功触发第二个Popover啦～

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