Selecting an element with jQuery in a Twitter Bootstrap Popover

Question

I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:

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

I'm using a button to reveal the popover which contains the above content:

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

I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:

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

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

However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?

Reference: Popovers in Bootstrap

Answer 1

You do not need to perform Event delegation here.Instead use $('#popover-content') instead of $('#popover-content').html() while setting the content. This will have the events registered attached by default without requiring any delegation.

Demo

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

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

Answer 2

You can try this:

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