title: multiple bootstrap popovers with unique ids- not working on shown event
body: <p>I am trying to create and initialize multiple popovers, using the same code. The html element is being created in JS-</p>
  
  <p><code>var panel = ('&lt;a href="javascript://" id= "'+popId+'" data-title="xyz" &gt;');</code></p>
  
  <p><code>popId</code> is a unique value for each so the ids getting assigned are unique</p>
  
  <p>Next I am calling the following function-</p>
  
  <pre><code>createPopOver("#"+popId,&lt;another_arg&gt;);
  </code></pre>
  
  <p>The create function looks like this-</p>
  
  <pre><code>function createPopOver(selector,&lt;another_arg&gt;) {
    $(selector).popover({
      trigger: 'click',
      placement : 'left'
    }).on('shown.bs.popover', function () {
      console.log("reached here1"+selector);
      ...
    });
  }
  </code></pre>
  
  <p>debugging through the control goes to the function however not inside the shown event and so the console does not print anything.</p>
  
  <p>If I give an <code>id="xyz"</code> so now all the popovers have the same id, the very first popover will show up on clicking but with incorrect text (the content to display is being computed in the create popover function).                </p>