输入中的可点击字体真棒图标

Question

我目前有一个位于输入字段上方的字体真棒图标。我希望这个图标可以点击，但我似乎无法让它工作。我已将它包裹在一个范围内，并更改了跨度光标，但它似乎没有任何效果。

以下是代码：

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa {
  left: 0px;
}
.right-addon .fa {
  right: 0px;
}
.left-addon input {
  padding-left: 30px;
}
.right-addon input {
  padding-right: 30px;
}
#locationClickableIcon {
  cursor: pointer;
}

 <span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
<input type="text" id="address" placeholder="Zipcode" value="" />

Answer 1

它没有任何效果，因为您没有要求它在点击时做任何事情。这可以按照你想要的方式工作。如果您希望它的行为类似于链接，请将<span>更改为<a>并提供点击处理程序。

点击处理程序

＆＃13;

＆＃13;

$(function () {
  $("#locationClickableIcon").click(function () {
    alert("You clicked me!");
  });
});

＆＃13;

.inner-addon {
  position: relative;
}

.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}

.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
#locationClickableIcon {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
<input type="text" id="address" placeholder="Zipcode" value="" />

＆＃13;

＆＃13;

＆＃13;

链接

＆＃13;

＆＃13;

.inner-addon {
  position: relative;
}

.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}

.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
#locationClickableIcon {
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a id="locationClickableIcon" href="http://example.com/"><i class="fa fa-crosshairs" id='autolocate'></i></a>
<input type="text" id="address" placeholder="Zipcode" value="" />

＆＃13;

＆＃13;

＆＃13;