javascript - 单击时无法使用 Font Awesome 图标

Question

我有一个简单的输入，右侧有一个搜索图标。当我点击这个图标时，我只是想触发一个事件，比如在控制台上打印一些东西。

所以我有以下 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>

图标在最里面的span标签<span class="fa fa-search" aria-hidden="true"/>

我只是想在单击此图标时在控制台上记录一些内容。

我尝试了以下 jquery:

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

还有这个:

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

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

有人可以帮我完成这项工作吗？我是新来的，但我不明白我做错了什么..

Answer 1

编辑

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

---

它应该可以工作，它简单直接，只需确保您在 document.ready 上调用它即可。或者在 </body> 之前标签。

$(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>