title: onclick span not working inside a button
body: <p>What i want is, when click on (X) inside a button, then it should trigger the respective callback registered. But i dont know why it is failing. Below is what i tried:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="cover"&gt;&lt;/div&gt;
  &lt;template id='filtertemp'&gt;
                  &lt;button id="filtype" class='filbut' data-filter=""&gt;&lt;/button&gt;
  &lt;/template&gt;
  &lt;button id='create' onclick="filter();"&gt;Click&lt;/button&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>function filter(){
  var content= $('#filtertemp')[0].content;
  if(content){
      var filType= content.querySelector('#filtype');
      $(filType).text("type : sometype");
      var clone= document.importNode(content,true);
      $('#cover').append($(clone));
      $('#cover &gt; .filbut:last-child').append('&lt;span class="glyphicon glyphicon glyphicon-remove"&gt;&lt;/span&gt;');
  }
  $('.glyphicon').on('click', function(){
      alert('Remove');
  });
  }
  </code></pre>
  
  <p>Here is the fiddle link: <a href="http://jsfiddle.net/wtce6dje/" rel="nofollow">http://jsfiddle.net/wtce6dje/</a> </p>
  
  <p>I tried even below to register listener, but that too dint seemed to work:</p>
  
  <pre><code>$('body').on('click','.glyphicon', function(){
      alert('Remove');
  });
  </code></pre>