javascript - tablas - X-entrada editable editable al hacer clic en otro elemento

obtener datos de una tabla html javascript

Question

Tengo una entrada x-editable, que estoy usando para editar nombres de usuario. La acción predeterminada del elemento es que al hacer clic en sí mismo, puede editar un valor. Pero quiero habilitar hacer clic en el elemento editable y poder editar el valor dentro de mi entrada. Acortar cosas aquí es un problema de mi situación actual.

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>

Sería bueno si alguien pudiera ayudarme y editar mi jsfiddle vinculado de la manera que describí. Al hacer clic .edit, ser capaz de editar el valor.

Answer 1

Tiene una función llamada habilitar que puede usar para habilitar la edición

$(''.edit'').click(function(e){    
       e.stopPropagation();
       $(''#publicname-change'').editable(''toggle'');
});

Esto no funcionará si no agrega la primera línea porque el comportamiento predeterminado es deshabilitar la edición al hacer clic en cualquier otro elemento.

Editar:

Para habilitar la edición solo en el clic del botón de edición y no en el texto, establezca la propiedad de toggle en manual .

$(''#publicname-change'').editable({
    type: ''text'',
    url: ''/post'',
    pk: 1,
    placement: ''top'',
    title: ''Enter public name'',
    toggle:''manual''
}

JSFiddle