X - edytowalne dane wejściowe edytowalne po kliknięciu na inny element

Question

Mam x edytowalne dane wejściowe, których używam do edycji nazw użytkowników. Domyślną akcją tego elementu jest kliknięcie, możesz edytować wartość. Ale chcę włączyć kliknięcie elementu .editable i móc edytować wartość wewnątrz mojego wejścia. Aby skrócić rzeczy tutaj jest a jsfiddle z mojej obecnej sytuacji.

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> 

Byłoby miło, jeśli ktoś może mi i zmienił mój związane jsfiddle w sposób opisałem pomóc. Po kliknięciu .edit, możesz edytować wartość.

Answer 1

Posiada funkcję o nazwie umożliwiają można używać, aby umożliwić edycję

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

To nie będzie działać, jeśli nie dodać pierwszą linię, ponieważ domyślne zachowanie jest wyłączenie zmienił kliknięciem każda inna element.

Edit:

Aby umożliwić edycję tylko na kliknięcie przycisku Edytuj, a nie tekstu, należy ustawić toggle właściwość manual.

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

JSFiddle