如何恢复 jeditable 功能？

Question

我想知道如何在从 table 中删除单元格后恢复 Jeditable 字段？

我有 table

行有一个单元格（colspan）
包含许多单元格的行（包含 ID-s 的行）

带有 ID 的行有一个单元格，其中包含一些文本和 editable span-元素（使用 Jeditable）。现在，当我单击按钮时，我想从具有 ID 的行中删除所有单元格，并将其替换为仅包含 span 元素（应保留为 editable）的单元格。

问题是：我无法恢复那些重新创建的 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);
    });
});

如何恢复 jeditable 功能？

How to restore jeditable functionality?

javascript

jquery

jeditable