title: Why is an on "click, "button" being handled by a span instead?
body: <p>I'm experiencing something that seems quite wrong with events and <code>jquery</code>.</p>
  
  <p>I have the following simple HTML list</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;button class="btn btn-danger btn-xs"&gt;&lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt;&lt;/button&gt; Chocolate&lt;/li&gt;
    &lt;li&gt;&lt;button class="btn btn-danger btn-xs"&gt;&lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt;&lt;/button&gt; Butter&lt;/li&gt;
    &lt;li&gt;&lt;button class="btn btn-danger btn-xs"&gt;&lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt;&lt;/button&gt; Milk&lt;/li&gt;
    &lt;li&gt;&lt;button class="btn btn-danger btn-xs"&gt;&lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt;&lt;/button&gt; ugar&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the following JavaScript:</p>
  
  <pre><code>$(document).on("click", "button", function(evt) {
    console.debug("got a click in", evt.target);
  });
  </code></pre>
  
  <p>When I click in a button I get</p>
  
  <pre class="lang-none prettyprint-override"><code>got a click in &lt;span class="glyphicon glyphicon-minus-sign"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>and not in the button.</p>
  
  <p>Why?</p>