jQuery X - 单击其他元素时可编辑的可编辑输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16891123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
X - editable input editable on click on other element
提问by dzordz
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 jsfiddleof my current situation.
我有一个 x 可编辑输入，我用它来编辑用户名。元素的默认操作是当您单击它自己时，您可以编辑一个值。但我想启用点击元素的 .editable 并能够编辑我输入中的值。缩短这里的东西是我目前情况的一个jsfiddle。
jQuery:
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:
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 jsfiddlein the way I described. On click .edit, be able to edit value.
如果有人可以帮助我并按照我描述的方式编辑我链接的 jsfiddle，那就太好了。单击 .edit 时，可以编辑值。
回答by bitkot
It has a function called enable you can use that to enable edit
它有一个名为 enable 的功能，您可以使用它来启用编辑
$('.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 toggleproperty to manual.
要仅在单击编辑按钮而不是文本时启用编辑，请将toggle属性设置为manual。
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name',
toggle:'manual'
}
