how to click on a glyphicon inside a input field

Question

I have an input field with a glyphicon

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

The output visually is the following (as desired):

I want to trigger an event on click of the glyphicon but it seems that the event never fires. The js code is the following (in the documentReady block):

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

This is just to clean the input field. What am I missing here?

Answer 1

If you check the i element in the DOM inspector you can see that the element has had pointer-events: none applied to it by Bootstrap's forms.less file. This means that the element does not raise mouse events.

To fix this, override that setting in your own 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>

Answer 2

尝试在<i id="cleanLoc" class="form-control-feedback glyphicon glyphicon-remove-circle"></i>上设置z-index: 1样式属性