我有一个简单的输入,右侧有一个搜索图标。当我点击这个图标时,我只想触发一个事件,比如在控制台上打印一些东西。
所以我有以下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 class="fa fa-search" aria-hidden="true"/>
中
我单击此图标时只想在控制台上记录一些内容。
我尝试了以下jquery:
$('.fa-search').click(function(){
console.log("dddddd");
});
还有这个:
$("body").on('click', ".fa-search", function(){
console.log("dddddd");
});
有人可以帮助我完成这项工作。我是新手,但我不知道我做错了什么..
编辑
该HTML结构无效。按钮是一个块元素以及@adam在注释中指出的跨度和真正的问题
它应该工作简单直接只是确保你在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>