title: Click listener on Twitter Bootstrap .popover class is not firing Event.StopPropagation
body: <p>I'm using the following code on a class of Twitter Bootstrap Popovers to ensure that only one popover can be opened at a time, and that clicking outside the popover closes it. Clicking <em>inside</em> a popover should <em>not</em> close the popover, ensuring that any form elements inside the popover can be used effectively.</p>
  
  <p>I based my solution off of this accepted answer to the StackOverflow Question <a href="https://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element">How do I detect a click outside an element?</a></p>
  
  <p>It works almost perfectly, except that clicking inside the popover still closes the popover. StopPropagation is not firing from within the click listener on the .popover class.</p>
  
  <p>Inspecting the popovers reveals that they do have the class .popover, so why isn't the listener picking up the click?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" class="linkPopover"&gt;Popover One&lt;/a&gt;
  &lt;a href="#" class="linkPopover"&gt;Popover Two&lt;/a&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>$(document).click(function() {
      $('.linkPopover').popover('hide');
  });
  
  $('.popover').click(function(e) {
      e.stopPropagation(); // code inside this listener is not being fired
  });
  
  $('.linkPopover').click(function() {
      $('.linkPopover').not(this).popover('hide');
  });
  
  $('.linkPopover')
      .popover({
          content: 'test'
      })
      .click(function(e) {
          e.stopPropagation();
      });
  </code></pre>
  
  <p>Thank you for your help.</p>