How to restore jeditable functionality?

Question

I try to figure out, how to restore Jeditable fields after removing cells from table?

I have table where are

1. rows with one cell (colspan)
2. rows with many cells (rows with ID-s)

Rows with ID have a cell which contains some text and editable span-element (with Jeditable). Now when I click on button, I want to remove from rows with ID all cells and replace it with cell which contains only the span-element (which should remain editable).

Problem is: I can't restore editability for those recreated spans.

I tried different approaches, most simple should running $( '.editable' ).editable('enable'), but I can't figure out, why it does not working.

One of my efforts is like this:

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable('enable');
      }
    });
  });

  $('.editable').editable('echo.php', {
    type      : 'text',
    tooltip   : 'Just click...'
  });

});

Made a Fiddle too, hope it helps to better understand my problem.

Answer 1

Problem

The issue seems to be that the editable object is being destroyed and when you attempt to re-enable it, it doesn't keep the same options so it fails.

Solution:

Abstract the options to a variable (for easier changes going forward)

var editableOptions = {
    type      : 'text',
    tooltip   : 'Just click...'
  };
var editableURL = 'echo.php';

Update the .editable() call to use these new variables:

$(document).ready(function(){
  $("#remove").click(function() {
    $("table#original tr").each( function( index, row ) {
      if ( $( row ).attr( 'id' ) ) {
        var editabaleField = $( row ).children( 'td' ).children( 'span' ).text();
        $( row ).children( 'td' ).remove();
        $("<td colspan='3'><span class='editable'>" + editabaleField + "</span></td>").appendTo( row );
        $( '.editable' ).editable(editableURL, editableOptions)
      }
    });
  });

  $('.editable').editable(editableURL, editableOptions);
});

Working JSFiddle