Как восстановить jeditable функциональность?

Question

Я пытаюсь выяснить, как восстановить Jeditable полей после удаления ячеек из таблицы?

У меня есть таблица, где находятся

1. строки с одной ячейкой (colspan)
2. строк с большим количеством ячеек (строк с ID -s)

Строки с ID имеют ячейку, которая содержит некоторый текст и редактируемый span -элемент (с Jeditable). Теперь, когда я нажимаю кнопку, я хочу удалить из строк с идентификатором все ячейки и заменить его на ячейку, которая содержит только элемент span (который должен оставаться редактируемым).

Проблема: Я не могу восстановить редактируемость для воссозданных span.

Я пробовал разные подходы, самый простой должен работать $('.editable').editable('enable'), но я не могу понять, почему он не работает.

Один из моих усилий, как это:

$(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...' 
    }); 

}); 

Сделано Fiddle тоже надеюсь, что это помогает лучше понять мою проблему.

Answer 1

Проблема

Проблема, кажется, что редактируемый объект разрушается и при попытке включить его, он не сохраняет те же параметры, так что не удается.

Решение:

Аннотация опции к переменной (для более легких изменений, происходящих вперед)

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

Обновление .editable() вызова использовать эти новые переменные:

$(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

Answer 2

Вам не нужно воссоздавать редактируемое поле в новой ячейке td. На самом деле вы не должны его удалять в первую очередь. Правильный способ обработки этого с точки зрения производительности и оптимизации заключается в создании нового td и перемещении уже инициализированного редактируемого элемента к нему. В этом случае вам не придется беспокоиться о повторной инициализации этого еще раз.

Так что ваш код будет:

$(document).ready(function() { 

    $("#remove").click(function() { 
     $("table#original tr").each(function (index, row) { 
      if (row.id) { 
       var editableField = $(row).find('.editable'); 
       var newTd = $("<td colspan='3'></td>").append(editableField); 
       $(row).empty().append(newTd); 
      } 
     }); 
    }); 

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

}); 

Демо:http://jsfiddle.net/jxtnd1g4/

Или немного короче вариант для одного и того же:

$("#remove").click(function() { 
    $("table#original tr[id]").html(function() { 
     var editable = $(this).find('.editable'); 
     return $('<td colspan="3"></td>').append(editable); 
    }); 
});