Không thể nhấp vào liên kết trong phản hồi biểu mẫu-kiểm soát trong Bootstrap 3.3.5

Question

Tôi đã sử dụng các liên kết trong form-control-feedbackspan để thực hiện các chức năng javascript từ 3.1.1. Tôi đang cố gắng nâng cấp lên 3.3.5, nhưng hành vi cho số form-control-feedback đã thay đổi.

Vui lòng tham khảo Working JsFiddle 3.1.1

ĐOẠN

<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> \t 
 
    </span> 
 
</div>

và đến Not Working JsFiddle 3.3.5

ĐOẠN

<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> \t 
 
    </span> 
 
</div>

Tôi đã kiểm tra, có một z-index:2 thêm vào trong 3.3.5. Tôi đã cố gắng ghi đè nó bằng cách đặt thành một số lớn hơn, nhưng nó không hoạt động.

Bạn có bất kỳ suy nghĩ nào để hoạt động trở lại không? Bất kỳ cách giải quyết nào?

Answer 1

Thật đơn giản, trong 3.3.5 lớp .form-control-feedback có pointer-events:none làm cho yếu tố đó không thể nhấp được.

thấy một đoạn với 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>&nbsp;<a class="pointer" onmousedown="save=true;" onclick="console.log('i love u too')"><small><i>save</i></small></a> \t 
 
    </span> 
 
</div>