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

Question

我将以下内容放在Twitter Bootstrap popover中,其中包含我想要听取点击的链接:

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

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

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

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

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

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

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

参考:Bootstrap中的弹出窗口

Answer 1

您不需要在此处执行事件委派$('#popover-content').$('#popover-content').html()而不是在设置内容时使用而不是.这将默认注册附加的事件,无需任何委派.

演示

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

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