Bootstrap 3 form-control-feedback 元素上的单击事件不起作用

Question

我有一个绝对定位的 .form-control-feedback 元素，可以显示在文本输入元素的最右侧。

我有一个绑定到此 .form-control-feedback 元素的单击事件，但我无法单击该元素。似乎文本输入位于定位元素的顶部，从而阻止了该元素被单击。我玩过元素上的 z-index，但它没有帮助。

我有一个演示问题的小提琴：https://jsfiddle.net/sot7mwa3/

HTML：

<div class="row p-3 pb-0">
  <div class="col-sm-6">
    <div class="form-group-xs has-clear">
      <div class="col-xs-12">
        <div class="input-group input-group-xs position-relative">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default dpTaskMcSelBtn" data-sel-mode="all">all</button>
          </span>
          <span class="input-group-btn">
            <button type="button" class="btn btn-default dpTaskMcSelBtn" data-sel-mode="none">none</button>
          </span>
          
          <!-- this is the text input -->
          <input type="text" id="dpTaskMcSelSearch" class="form-control" placeholder="search" />
          
          <!-- this is the positioned element I am trying to click on -->
          <span class="form-control-clear form-control-feedback hidden">x</span>

        </div>
      </div>
    </div>
  </div>

CSS：

.form-control-clear {    
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 3;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;   
  background-color:blue;
  color: white;
}

.form-control-clear:hover {
  cursor: pointer;
}

JS：

$(document).ready(function(){

    // show hide the clear search 'X' icon
    $('#dpTaskMcSelSearch').on('input propertychange', function () {
        var self = $(this);
        var visible = self.val() !== '';
        self.siblings('.form-control-clear').toggleClass('hidden', !visible);
    }).trigger('propertychange');

    // when the clear search 'X' icon is clicked
    $('.form-control-clear').click(function () {
          alert('click');
        $('#dpTaskMcSelSearch').val('').trigger('propertychange').focus();        
    });

});

Answer 1

如果您将以下内容添加到您的 .form-control-clear 元素，它将触发的点击事件：

.form-control-clear {
   pointer-events: all;
}