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

Posted 2023-05-08

【中文标题】X - 单击其他元素时可编辑的可编辑输入

【英文标题】：X - editable input editable on click on other element

【发布时间】：2013-05-29 06:32:15

【问题描述】：

我有一个 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，就可以编辑值了。

【参考方案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

【讨论】：

谢谢，但我没能解决它...你能这么好心并在我的 jsfiddle 中编辑它吗？ jsfiddle.net/jjdJX

我刚刚更新了你的 jsfiddle，检查一下，我不知道 jsfiddle 是如何工作的，所以这里是链接jsfiddle.net/jjdJX/1

我还有一个问题......也许你可以帮助我，所以我不会在***上问另一个问题。我想这样做，所以当点击 .edit 时，它会被隐藏......

不，当点击编辑时，它会被隐藏，你修改你的输入，点击检查按钮，然后它再次显示......与现在显示的两个按钮相反。你明白了吗？

简而言之，我希望它在被点击时被禁用，我认为首先我们的意思是一样的，很抱歉误解了。那么如何制作以便在再次单击编辑时将其禁用？