如何恢复 jeditable 功能？答案

【问题标题】：How to restore jeditable functionality?如何恢复 jeditable 功能？
【发布时间】：2015-07-26 19:00:22
【问题描述】：

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

我有桌子在哪里

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

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

问题是：我无法恢复那些重新创建的spans 的可编辑性。

我尝试了不同的方法，最简单的应该运行$( '.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，希望它有助于更好地理解我的问题。

【问题讨论】：

标签： javascript jquery jeditable

【解决方案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

【讨论】：

【解决方案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);
    });
});

【讨论】：