как щелкнуть глифик внутри поля ввода

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

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

Это просто для очистки поля ввода. Что мне здесь не хватает?

Answer 1

Если вы проверите элемент i в инспекторе DOM, вы увидите, что к элементу был применен pointer-events: none файл

Bootstrap. Это означает, что элемент не вызывает события мыши. *1004*

Чтобы исправить это, переопределите этот параметр в своем собственном 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

Попробуйте установить z-index: 1 свойство стиля на <i id="cleanLoc" class="form-control-feedback glyphicon glyphicon-remove-circle"></i>