时间戳

首页 > 解决方案 > 如何单击输入字段内的字形图标

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

问题描述

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

        <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 块中）：

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

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

标签： javascriptjquerytwitter-bootstrap

解决方案

如果您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>

推荐阅读