我使用form-control-feedback
span
中的链接来执行自3.1.1以来的javascript函数。我正在尝试升级到3.3.5,但form-control-feedback
的行为发生了变化。
SNIPPET
<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> <a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a>
</span>
</div>
SNIPPET
<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> <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
。我试图通过设置更大的数字来覆盖它,但它不起作用。
你有什么想法让它再次运作?任何解决方法?
答案 0 :(得分:19)
这很简单,在3.3.5中,类.form-control-feedback
具有pointer-events:none
,这使得该元素无法点击。
请参阅v3.3.5的代码段
.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> <a class="pointer" onmousedown="save=true;" onclick="console.log('i love u too')"><small><i>save</i></small></a>
</span>
</div>