title: Bootstrap data-toggle="button" not working with <span>
body: <p>I'm using the 'data-toggle'-option from Bootstrap for a button. In the button I have a  with glypicons and sometext. However, when you click on the text it works, but when you click on the glyphicon it doesn't trigger the data-toggle.
  Since the data-toggle does not work in JSFiddle I cannot post a link to it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="button" id="showHide" class="btn btn-default" data-toggle="button"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; show&lt;/button&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>document.getElementById("showHide").onclick = function () {
      if ($("#showHide").text() == " show") {
          document.getElementById("showHide").innerHTML = "&lt;span class=\"glyphicon glyphicon-eye-close\"&gt;&lt;/span&gt; hide";
          document.getElementById("showHide").blur();
      } else {
          document.getElementById("showHide").innerHTML = "&lt;span class=\"glyphicon glyphicon-eye-open\"&gt;&lt;/span&gt; show";
          document.getElementById("showHide").blur();
      }
  }
  </code></pre>
  
  <p>I've looked online but haven't found a solution or someone with the same problem.</p>