22

ユーザー名を編集するために使用している x-editable 入力があります。要素のデフォルトのアクションは、それ自体をクリックしたときで、値を編集できます。しかし、要素の .editable をクリックして、入力内の値を編集できるようにしたいと考えています。ここで何かを短くすることは、私の現在の状況の 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 をクリックすると、値を編集できます。

4

1 に答える 1

49

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

于 2013-06-03T08:08:09.513 に答える