X-可编辑输入，单击其他元素时可编辑 [英] X - editable input editable on click on other element

问题描述

我有一个x可编辑的输入，用于编辑用户名.元素的默认操作是单击自身时，您可以编辑一个值.但是我要启用单击元素的.editable的功能，并能够在输入中编辑值.为了简化内容，这里是我目前情况的 jsfiddle .

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>

如果有人可以按照我的描述来帮助我并编辑链接的jsfiddle ，那将是很好的选择.点击.edit时，就可以编辑值.

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.

推荐答案

它具有一个名为enable的功能，您可以使用该功能启用编辑功能

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.

要仅允许单击编辑"按钮而不是文本来启用编辑，请将toggle属性设置为manual.

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

这篇关于X-可编辑输入，单击其他元素时可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！