使用JavaScript/JQuery创建多字段就地编辑器

我正在寻找一种用类似JavaScript或类似插件创建就地编辑器的方法。但是，不同之处在于，我的编辑器将是多字段形式，而不是单个字段

由于同一表单将用于不同的部分，即编辑现有项目和创建新项目，因此我希望能够为每个案例指定回调函数，而不必复制共享功能（例如验证、取消按钮等）

目前，我尝试天真地实现它，代码看起来很糟糕，因为事件处理程序分散在源代码中，而不是作为一个组件放在一起

---

因此，我的问题是，建议采用什么方法来实现这一点？如果有一个jQuery插件提供该功能，那么这可能是最简单的方法。否则，如何正确地构造代码？

问题是需要将数据与显示的文本分开。对于显示的每个数据块，将json dict（写入页面或使用ajax提取）与表单中每个字段的文本相关联

例如，如果正在使用名称（第一个、中间个、最后一个），则显示的名称如下：

<span class="editable">Colin M. Hansen</span>

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

---

您编写的通用代码将表单切换为

span

元素的

onclick

上的文本，并用dict中的数据填充每个输入字段。提交代码将新数据保存到

name1

和服务器，并返回新的显示文本。

问题是需要将数据与显示的文本分开。对于显示的每个数据块，将json dict（写入页面或使用ajax提取）与表单中每个字段的文本相关联

例如，如果正在使用名称（第一个、中间个、最后一个），则显示的名称如下：

<span class="editable">Colin M. Hansen</span>

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

---

您编写的通用代码将表单切换为

span

元素的

onclick

上的文本，并用dict中的数据填充每个输入字段。提交代码将新数据保存到

name1

和服务器，并返回新的显示文本。

分离回调的定义，并在可编辑回调中查找所需回调

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});

---

分离回调的定义，并在可编辑回调中查找所需回调

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});

---

在我的例子中，我只希望对表单提交按钮进行回调，而不是对每个字段进行回调。整个表单作为一个整体应该是show/hide/submit/cancel。在我的例子中，我只想对表单提交按钮进行回调，而不是对每个字段进行回调。整个表单应作为一个整体显示/隐藏/提交/取消。