title: On click stopPropagation while keeping bootstrap collapse behavior
body: <p>I have a bootstrap list-group-item with a badge as follows:</p>
  
  <pre><code>&lt;a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0"&gt;
      &lt;span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" &gt;
          changed files:1
      &lt;/span&gt;
      &lt;ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;"&gt;
          &lt;li class="list-group-item changed-file"&gt;
              release.groovy
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>It contains a collapsed ul that is targeted by the badge.</p>
  
  <p>At the same time, when clicked, the a element is selected(as it is part of a list-group with multiple selection possible).</p>
  
  <p>I try to insert this bit of code:</p>
  
  <pre><code>$('.badge').on('click', function(e){
      //$('#'+this.id).click();
      e.stopPropagation();
  });
  </code></pre>
  
  <p>so that when clicking on the badge the a element is not selected. </p>
  
  <p>If I use this code the ul element is not being shown. I guess bootstrap uses the on click function and so it has something to do with my function overriding the bootstrap one. </p>
  
  <p>How can I stop propagation while keeping the collapse behavior?</p>