我有一个 x-editable 输入,我用它来编辑用户名。元素的默认操作是当您单击其自身时,您可以编辑值。但我想启用单击元素的 .editable 并能够编辑输入中的值。此处缩短为 a jsfiddle我目前的情况。
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>
如果有人可以帮助我并按照我所描述的方式编辑我链接的jsfiddle,那就太好了。点击.edit,可以编辑值。
最佳答案
它有一个名为enable的函数,您可以使用它来启用编辑
$('.edit').click(function(e){
e.stopPropagation();
$('#publicname-change').editable('toggle');
});
如果您不添加第一行,这将不起作用,因为默认行为是禁用单击任何其他元素时的编辑。
编辑:
要仅在单击编辑按钮时启用编辑而不是文本,请将 toggle
属性设置为 manual
。
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name',
toggle:'manual'
}
关于javascript - X - 可编辑输入可在单击其他元素时进行编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16891123/