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

Question

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

我有一个绑定到此 .form-control-feedback 元素的点击事件，但我无法点击该元素。看起来文本输入位于定位元素的顶部，防止元素被点击。我试过元素上的 z-index，但没有用。

我有一个 fiddle 证明了这个问题：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;
}

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

Click event on Bootstrap 3 form-control-feedback element not working

css

jquery

twitter-bootstrap-3