Bootstrap and jQuery click event not working
<p>I have a <code>div</code> element with a couple of <code>inputs</code>. When I started coding this, I had jQuery only, and my <code>click</code> event for the inputs was working properly.<br>
Then, I added Bootstrap, and the event just stopped working.<br>
This is the code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Qué Pido?&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id="que-pido"&gt;&lt;/p&gt;

&lt;!-- jQuery and Bootstrap --&gt;
&lt;script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;

&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    getFromEndpoint("clasicas");    
  });

  function getFromEndpoint(endpoint) {
    $(document).ready(function() {
      $.get( "que" + "/" + endpoint, function( data ) {
        console.log(data);
        $( "#que-pido" ).html( data );
      });
    });
  }

  $(document).ready(function() {
    $(".categorias").click(function() {
      console.log("clicked: " + $(this));
      var endpoint = $(this).attr('id');
      getFromEndpoint(endpoint);
    });
  });
&lt;/script&gt;

&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-outline-primary active"&gt;
    &lt;input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked&gt; Cl&amp;aacute;sicas
  &lt;/label&gt;
  &lt;label class="btn btn-outline-primary"&gt;
    &lt;input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"&gt; &amp;Eacute;tnicas
  &lt;/label&gt;
  &lt;label class="btn btn-outline-primary"&gt;
    &lt;input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"&gt; Todas
  &lt;/label&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If I remove the <code>labels</code>, then the <code>click</code> method is properly fired... but of course, I get none of the CSS that Bootstrap provides.<br>
I also tried removing Bootstrap's JS, but then I lose the animation that happens when pressing each button, and I'd like to keep that if possible.</p>

<p>Any ideas on this?<br>
Thanks in advance</p>