CODEWITHSUNDEEP
javascriptjqueryhtml
incense_stick
incense_stick

Reputation: 478

on click not working on font awesome icon

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.

So I have the following HTML : 

<div class="input-group stylish-input-group">
  <input type="text" class="form-control"  placeholder="Search" >
    <span class="input-group-addon">
      <button id = "btnSrch" type="submit"/>
        <span class="fa fa-search" aria-hidden="true"/>
    </span>
</div>

The icon is in the innermost span tag <span class="fa fa-search" aria-hidden="true"/>

I simply want to log something on the console when I click this icon.

I tried the following jquery : 

$('.fa-search').click(function(){
        console.log("dddddd");
    });

also this one : 

$("body").on('click', ".fa-search", function(){

            console.log("dddddd");
        });

Can someone help me make this work. I am new to this, but I don't see what am I doing wrong..

Upvotes: 1

Views: 5833

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

EDIT

That HTML structure is invalid. button is a block element as well as span as pointed out by @adam in comments ws the real problem

It should work it is simple and straight just make sure you are calling it on document.ready or before the </body> tag.

$(document).on('click','.fa-search',function(){
console.log('clicked');
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group stylish-input-group">
  <input type="text" class="form-control"  placeholder="Search" >
        <span class="fa fa-search" aria-hidden="true"/>

</div>

Upvotes: 4

Related Questions