Link in Form-Control-Feedback kann nicht in Bootstrap 3.3.5

Question

geklickt werden Ich habe Links in form-control-feedbackspan, um JavaScript-Funktionen seit 3.1.1. Ich versuche auf 3.3.5 zu aktualisieren, aber das Verhalten für die form-control-feedback hat sich geändert.

verweisen auf die 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>

und zum 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>

Ich habe, gibt es eine z-index:2 in 3.3.5 hinzugefügt. Ich habe versucht, es zu überschreiben, indem ich auf eine größere Zahl setze, aber es funktioniert nicht.

Haben Sie irgendwelche Gedanken, damit es wieder funktioniert? Irgendwelche Problemumgehungen?

Answer 1

Das ist einfach, in 3.3.5 hat die Klasse .form-control-feedbackpointer-events:none, die dieses Element nicht anklickbar macht.

sehen einen Ausschnitt mit 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>