javascript - 如何单击输入字段内的字形图标

Question

我有一个带有字形的输入字段

        <div class="form-group has-feedback has-feedback-left">
          <label class="control-label">Nome località: </label>
          <input type="text" class="form-control" value="" name="nome_loc" id="nome_loc">
          <i id="cleanLoc" class="form-control-feedback glyphicon glyphicon-remove-circle"></i>
        </div>

视觉输出如下(根据需要):

我想在单击字形图标时触发一个事件，但该事件似乎永远不会触发。 js代码如下(在documentReady block 中):

$('#cleanLoc').click(function(){
  $('#nome_loc').val('');
});

这只是为了清理输入字段。我在这里缺少什么？

Answer 1

如果您检查i在 DOM 检查器中的元素，您可以看到该元素具有 pointer-events: none通过 Bootstrap 的 forms.less 应用到它文件。这意味着该元素不会引发鼠标事件。

要解决此问题，请在您自己的 CSS 中覆盖该设置:

$('#cleanLoc').click(function() {
  $('#nome_loc').val('');
});

.form-group i { pointer-events: auto; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<div class="form-group has-feedback has-feedback-left">
  <label class="control-label">Nome località: </label>
  <input type="text" class="form-control" value="" name="nome_loc" id="nome_loc">
  <i id="cleanLoc" class="form-control-feedback glyphicon glyphicon-remove-circle"></i>
</div>