Nie można kliknąć linku w form-control-feedback w Bootstrap 3.3.5

Question

Używałem odnośników w form-control-feedbackspan do wykonywania funkcji javascript od wersji 3.1.1. Próbuję uaktualnić do wersji 3.3.5, ale zmieniło się zachowanie dla form-control-feedback.

Proszę odnieść się do Working JsFiddle 3.1.1

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>&nbsp;<a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a> \t 
 
    </span> 
 
</div>

i do Not Working JsFiddle 3.3.5

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>&nbsp;<a class="pointer" onmousedown="save=true;" click="alert('i love u too')"><small><i>save</i></small></a> \t 
 
    </span> 
 
</div>

sprawdziłem, jest z-index:2 dodana w 3.3.5. Próbowałem nadpisać, ustawiając większą liczbę, ale to nie działa.

Czy masz jakieś przemyślenia, aby sprawić, by działał ponownie? Jakiekolwiek obejścia?

Answer 1

To proste, w wersji 3.3.5 klasa .form-control-feedback ma pointer-events:none, co sprawia, że ​​element ten nie jest klikalny.

zobaczyć fragment z 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>