在 Bootstrap 3.3.5 中无法点击 form-control-feedback 中的链接答案

【问题标题】：Link in form-control-feedback can't be clicked in Bootstrap 3.3.5在 Bootstrap 3.3.5 中无法点击 form-control-feedback 中的链接
【发布时间】：2017-05-11 23:30:58
【问题描述】：

自 3.1.1 以来，我一直在使用 form-control-feedback span 中的链接来执行 javascript 函数。我正在尝试升级到 3.3.5，但 form-control-feedback 的行为发生了变化。

请参考Working JsFiddle 3.1.1

片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
  <label class="control-label sr-only" for="rename"></label>
  <input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
  <span class="form-control-feedback" style="top: 0px;right: 44px;">
    <a class="pointer" onclick="alert('I love u')"><small>cancel</small></a>&nbsp;<a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a> 	
  </span>
</div>

和Not Working JsFiddle 3.3.5

片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
  <label class="control-label sr-only" for="rename"></label>
  <input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
  <span class="form-control-feedback" style="top: 0px;right: 44px;">
    <a class="pointer" onclick="alert('I love u')"><small>cancel</small></a>&nbsp;<a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a> 	
  </span>
</div>

我查了一下，在 3.3.5 中添加了一个z-index:2。我试图通过设置一个更大的数字来覆盖它，但它不起作用。

你有什么想法让它再次工作吗？有什么解决方法吗？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这很简单，在 3.3.5 中，.form-control-feedback 类具有 pointer-events:none，这使得该元素不可点击。

查看 v3.3.5 的 sn-p

.form-group .form-control-feedback {
  top: 0;
  right: 44px;
  pointer-events: initial; /* or - auto // or -  unset  */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
  <label class="control-label sr-only" for="rename"></label>
  <input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
  <span class="form-control-feedback">
    <a class="pointer" onclick="console.log('I love u')"><small>cancel</small></a>&nbsp;<a class="pointer" onmousedown="save=true;" onclick="console.log('i love u too')"><small><i>save</i></small></a> 	
  </span>
</div>

【讨论】：