javascript - X - 单击其他元素时可编辑的可编辑输入

Question

我有一个 x-editable 输入，用于编辑用户名。元素的默认操作是当您单击其自身时，您可以编辑一个值。但我想启用单击元素的 .editable 并能够编辑输入中的值。在这里缩短内容是我目前情况的一个杰作。

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，可以编辑值。

Answer 1

它有一个名为 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'
}

JSFiddle