jQuery：如何在 jQuery 中编辑附加的输入值？答案

【问题标题】：jQuery: How to edit appended input value in jQuery?jQuery：如何在 jQuery 中编辑附加的输入值？
【发布时间】：2012-06-19 20:14:20
【问题描述】：

我在左边有一些输入值（我们称之为输入面板）。单击添加按钮时，这些输入值将附加到右侧边栏的一个名为 bluebox 的 div 中

这是上面的一个 jsfiddle：jsfiddle

现在我希望用户能够单击其中一个 div 并编辑附加的输入值并保留更改。我更喜欢输入再次出现在输入面板中，而不是使用“保存/保持更改按钮”

我想到了一些方法来做到这一点，但我是初学者，所以可能会大错特错；）：

示例 1

您对我的目标有何建议？为什么我的例子会成功或失败？

非常感谢您！

【问题讨论】：

html5 内容编辑器html5demos.com/contenteditable
如果你不想使用 HTML5 contenteditable，你必须绑定一个函数到 click 事件，它用表单替换现有元素来编辑它们并有一个保存按钮关于用不可编辑元素保存和替换表单的内容。
您前进的方向是可控的，但要后退一步，牢牢掌握对未来元素使用委托方法。当前代码在addbutton clcik 内调用live()。这将继续向已添加的元素添加处理程序。添加 5 个元素，第一个元素在点击时会触发它的点击处理程序 5 次。还有一些可编辑的插件可以让您更轻松

【解决方案1】：

我建议您添加一个保存按钮、一个隐藏的 blueboxid div 来跟踪单击了哪个 bluebox，以及一个稍微模块化的设计，以便您可以更轻松地考虑更改（也使事情更容易阅读）。

我在这里为你准备了一个完整的 jsfiddle http://jsfiddle.net/s6Yxz/26/ :)

【讨论】：

【解决方案2】：

一些一般性的想法 - 您可以像这样将数据添加到蓝盒 div：

$('<div>').addClass('bluebox').data({ field1: field1.val(), /* field 2 etc.. */ });

然后检索如下值：

$('.bluebox').click(function() {
  field1.val( $(this).data('field1') );
  // field 2 etc..
});

或者您可以在蓝盒中创建跨度结构：

bluebox = $('<div>').addClass('bluebox');
bluebox.append($('<span>').attr('data-name', 'field1').text(field1.val()));
// field 2 etc..

然后检索如下值：

$('.bluebox').click(function() {
  field1.val( $(this).find('span[data-name=field1]').text() );
  // field 2 etc..
});

随着这变得越来越复杂，您可能希望在字段名称上使用循环，并为不同类型的字段提供大小写。

【讨论】：

【解决方案3】：

如果 add-it 按钮没有将数据发布到服务器，您可以在 .bluebox 上使用内联编辑器，最后使用 save-it 按钮可以将#sidebar中的数据发布到服务器。

【讨论】：