X - editable input editable on click on other element

Question

I have an x-editable input, which I'm using to edit usernames. The default action of the element is when you click on itself, you can edit a value. But I want to enable click on the element's .editable and be able to edit the value inside my input. To shorten stuff here is a jsfiddle of my current 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> 

It would be nice if someone can help me and edit my linked jsfiddle in the way I described. On click .edit, be able to edit value.

Answer 1

It has a function called enable you can use that to enable edit

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

This won't work if you don't add the first line because default behaviour is to disable edit on click of any other element.

Edit:

To enable editing only on the click of edit button and not the text, set toggle property to manual.

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

JSFiddle