title: 'destroy' if the Bootstrap .popover() be on('hidden.bs.popover', is triggering another 'hidden.bs.popover' event
body: <p>I want to <code>'destroy'</code> the <code>.popover()</code> if it become <code>.on('hidden.bs.popover'</code> after it be <code>.on('shown.bs.popover'</code> so it will not <code>'show'</code> again. Everything seems right but look at the console, the event <code>'hidden.bs.popover'</code> is triggering twice because destroying a popover will trigger another <code>'hidden.bs.popover'</code> caused to destroy the destroyed popover and looks like it will affect a little of performance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    $('[data-toggle="popover"]').popover()
  })
  
  $('[data-toggle="popover"]').on('hidden.bs.popover', function () {
    $(this).popover('destroy');
    console.debug("'hidden.bs.popover' triggering twice!");
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?"&gt;Dismissible popover&lt;/a&gt;
  
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd tried to figure it out but I choose not to include that for avoiding confusion. What is the right way to destroy the popover that have dismissed without triggering the same event?</p>