javascript - 在 Twitter Bootstrap Popover 中使用 jQuery 选择元素

Question

我将以下内容放在 Twitter Bootstrap 弹出窗口中，其中包含一个我想监听其点击次数的链接:

<div id="popover-content">
  <a id="link" href="#">click</a>
</div>

我正在使用一个按钮来显示包含上述内容的弹出窗口:

<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>

然后我将该按钮与弹出窗口相关联并使用 jQuery 的 click() 函数来尝试监听对弹出窗口中包含的链接的点击:

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});

但是，在单击按钮以显示弹出窗口然后单击链接时，似乎没有按上述预期检测到单击。我对 DOM、javascript 和 jQuery 的理解相当有限，所以我不确定这里发生了什么。您如何选择/监听弹出窗口中包含的元素的操作？

引用:Popovers in Bootstrap

Answer 1

您不需要在这里执行事件委托(delegate)。而是使用 $('#popover-content') 代替 $('#popover-content').html() 同时设置内容。这将默认附加注册的事件，无需任何委托(delegate)。

Demo

$(function(){
  $('#trigger').popover({ 
    html: true,
    content: function() {
      return $('#popover-content'); //<-- Remove .html()
    }
  }); 

  $('#link').click(function() {
    alert('beep');
  });
});