X - editierbarer Eingang editierbar bei Klick auf anderes Element

Question

Ich habe einen x-editierbaren Eingang, den ich benutze, um Benutzernamen zu bearbeiten. Die Standardaktion des Elements ist, wenn Sie auf sich selbst klicken, können Sie einen Wert bearbeiten. Aber ich möchte aktivieren klicken auf die .editable des Elements und in der Lage sein, den Wert in meiner Eingabe zu bearbeiten. Um Sachen hier zu verkürzen ist a jsfiddle meiner aktuellen Situation.

jQuery:

$(function(){ 
    $.fn.editable.defaults.mode = 'inline'; 
    $('#publicname-change').editable({ 
    type: 'text', 
    url: '/post', 
    pk: 1, 
    placement: 'top', 
    title: 'Enter public name' 
    } 
); 

//ajax emulation. Type "err" to see error message 
$.mockjax({ 
    url: '/post', 
    responseTime: 100, 
    response: function(settings) { 
    if(settings.data.value == 'err') { 
     this.status = 500; 
     this.responseText = 'Validation error!'; 
    } else { 
     this.responseText = ''; 
    } 
    } 
}); 

HTML:

<div class="control-group control-group-inline"> 
    <label class="control-label labelModified" for="publicname-change">Public name:</label> 
    <div class="controls"> 
    <a href="#" id="publicname-change" class="editable editable-click inline-input">Mr. Doe</a> 
    <div class="edit">edit <i class="icon-pencil pencil-input-change"></i></div> 
    </div> 
</div> 

Es wäre schön, wenn mir jemand helfen kann und bearbeiten meine verknüpft jsfiddle in der beschriebenen Weise ich. Klicken Sie auf ".edit", um den Wert zu bearbeiten.

Answer 1

Es hat eine Funktion namens ermöglichen Sie, dass bearbeiten aktivieren können

$('.edit').click(function(e){  
     e.stopPropagation(); 
     $('#publicname-change').editable('toggle'); 
}); 

Das wird nicht funktionieren, wenn Sie die erste Zeile nicht hinzugefügt werden, da das Standardverhalten bearbeitet auf Klick irgendein andere zu deaktivieren ist Element.

Edit:

Bearbeitung aktivieren nur auf dem Klick auf die Schaltfläche Bearbeiten und nicht der Text, setzen toggle Eigenschaft auf manual.

$('#publicname-change').editable({ 
    type: 'text', 
    url: '/post', 
    pk: 1, 
    placement: 'top', 
    title: 'Enter public name', 
    toggle:'manual' 
} 

JSFiddle