Link in form-control-feedback non può essere cliccato in Bootstrap 3.3.5

Question

Stavo usando i collegamenti in form-control-feedbackspan per eseguire le funzioni javascript dal 3.1.1. Sto cercando di passare alla 3.3.5, ma il comportamento per il form-control-feedback è cambiato.

Si prega di fare riferimento alla 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>

e al 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>

ho controllato, c'è una z-index:2 aggiunto 3.3.5. Ho provato a sovrascriverlo impostando un numero più grande, ma non funziona.

Avete qualche idea per farlo funzionare di nuovo? Qualche soluzione alternativa?

Answer 1

Questo è semplice, in 3.3.5 la classe .form-control-feedback ha pointer-events:none che rende quell'elemento non selezionabile.

vedere un frammento con 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>