title: Bootstrap popover click event code is not run every time popover is created
body: <p>I have a function that if certain conditions are met [via input from 3 different fields (two <code>&lt;input&gt;</code> elements and one <code>&lt;selection&gt;</code> element] will create and display a popover on the  element. I am currently displaying the popover ONLY when all 3 fields have values in them so I can test the show/hide functionality of the popover.  The selection element is tied to the popover... </p>
  
  <pre><code>&lt;select data-toggle="popover" data-trigger="manual" class="invalid-model-popover        select-group aircraft-model" style="width: 90%;"&gt;
      &lt;option value="default" selected&gt;Select a model...&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is the code I'm using to create the popover.</p>
  
  <pre><code>verifyRoute: function() {
  
      $('#' + this.currentLeg.attr('id') + ' .invalid-model-popover').popover({
          placement: 'bottom',
          html: true,
          content: "&lt;div style='display:inline-block;width:100%'&gt;&lt;i class='glyphicon         glyphicon-remove pull-right'&gt;" +
                  "&lt;/i&gt;&lt;/div&gt;" +
                  "&lt;div style='font-weight:bold'&gt;Note:&lt;/div&gt;" +
                  "&lt;div&gt;Aircraft range does not meet&lt;br&gt;leg requirements." +
                  "Select&lt;br&gt;alternate aircraft or arrange&lt;br&gt;fuel" +
                  " stops&lt;/div&gt;"
  
      }).click(function(event) {   
              $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() {
              $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide');
          });
  
      });
  
      $('#' + this.currentLeg.attr('id') + " .invalid-model-popover").popover('show');
  },
  </code></pre>
  
  <p>So currently when I generate the popover from the set of actions, "Enter something in BOTH text inputs, select an option from the select element, popover appears, and hit "x" then" the popover closes. When I use the sequence "select an option from the select element, enter something in both text inputs" then the popover appears but the onClick of the "x" is not set up. If I step through the code the code to register the event....</p>
  
  <pre><code>.click(function(event) {   
          $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() {
          $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide');
      });
  
  });
  </code></pre>
  
  <p>is not even run. Here is a fiddle to illustrate the issue <a href="http://jsfiddle.net/restin84/fxf9wneb/68/" rel="nofollow">http://jsfiddle.net/restin84/fxf9wneb/68/</a> Any advice would be highly appreciated.</p>