title: on click not working on font awesome icon
body: <p>I have a simple input with a search icon in its right part.
  When I click this icon i simply want to trigger an event, say printing something on the console.</p>
  
  <p>So I have the following HTML : </p>
  
  <pre><code>&lt;div class="input-group stylish-input-group"&gt;
    &lt;input type="text" class="form-control"  placeholder="Search" &gt;
      &lt;span class="input-group-addon"&gt;
        &lt;button id = "btnSrch" type="submit"/&gt;
          &lt;span class="fa fa-search" aria-hidden="true"/&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The icon is in the innermost span tag <code>&lt;span class="fa fa-search" aria-hidden="true"/&gt;</code></p>
  
  <p>I simply want to log something on the console when I click this icon.</p>
  
  <p>I tried the following jquery : </p>
  
  <pre><code>$('.fa-search').click(function(){
          console.log("dddddd");
      });
  </code></pre>
  
  <p>also this one : </p>
  
  <pre><code>$("body").on('click', ".fa-search", function(){
  
              console.log("dddddd");
          });
  </code></pre>
  
  <p>Can someone help me make this work. I am new to this, but I don't see what am I doing wrong..</p>