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

Posted 2023-05-08

【中文标题】Bootstrap 3 form-control-feedback 元素上的单击事件不起作用

【英文标题】：Click event on Bootstrap 3 form-control-feedback element not working

【发布时间】：2021-02-27 19:49:00

【问题描述】：

我有一个绝对定位的 .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();        
    );

);

【参考方案1】：

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

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

【讨论】：

感谢样式来自他们在 .form-control-feedback 元素上设置的引导程序样式。为简单起见，我刚刚在该元素上粘贴了聚合样式。无论如何，我应该仔细看看那些。谢谢