Jquery 将元素从<；span>；至<；输入>；点击使用击倒

我正在从更改表行中的元素类型

<span class="phoneElement" data-bind="text: Phone"></span>

到

在一个按钮上单击“编辑”，这样我就可以对用户进行编辑以添加新的值

但我面临的问题是：当它更改为textbox类型时，它不保存数据绑定（旧值）或新输入的数据（新数据）。看起来数据绑定没有从span传输到Input。

最好不要只是“更改”元素标记，因为这并不是一件真正的事情（请参阅答案：）。简而言之，它不再是相同的元素。实现相同结果的最佳方法是通过状态属性进行控制并切换视图，例如：

<span class="phoneElement" data-bind="text: Phone, visible: !isEditingPhone(), click: editPhone"></span>
<input type="text" data-bind="textInput: Phone, visible: isEditingPhone, onBlur: doneEditingPhone"/>

然后需要实现方法来切换模型上的isEditingPhone属性

当然，如果您对几个字段进行封装，那么最好封装此逻辑。

最好不要只是“更改”元素标记，因为这不是真正的事情（请参阅答案：）。简而言之，它不再是相同的元素。实现相同结果的最佳方法是通过状态属性进行控制并切换视图，例如：

<span class="phoneElement" data-bind="text: Phone, visible: !isEditingPhone(), click: editPhone"></span>
<input type="text" data-bind="textInput: Phone, visible: isEditingPhone, onBlur: doneEditingPhone"/>

然后需要实现方法来切换模型上的isEditingPhone属性

---

当然，如果您对几个字段进行封装，则最好封装此逻辑。

您可以将

span设置为可编辑的
为什么不这样做呢。只需设置
'contentEditable'，true
它与
C#
和
asp.net mvc
标记有什么关系？@HappyDeveloper在替换/更改元素类型时，需要将数据绑定重新绑定到文本box@Alex：因为后端是C#并且使用MVCtemplate@guradio哈里达珊：你说得对。我已经对可编辑视图和不可编辑视图进行了绑定更改，只需添加具有相同绑定的两个元素，并使用Display属性控制显示。我还添加了可取消编辑的逻辑。您可以将
span设置为可编辑的
为什么不这样做呢。只需设置
'contentEditable'，true
它与
C#
和
asp.net mvc
标记有什么关系？@HappyDeveloper在替换/更改元素类型时，需要将数据绑定重新绑定到文本box@Alex：因为后端是C#并且使用MVCtemplate@guradio哈里达珊：你说得对。我已经对可编辑视图和不可编辑视图进行了绑定更改，只需添加具有相同绑定的两个元素，并使用Display属性控制显示。我还为可取消编辑添加了逻辑。我做了一些与您的答案类似的事情，并且效果良好。现在我有更大的问题。我有一个可编辑的下拉列表。在不可编辑模式下，当我绑定同一属性时，它实际上会将值绑定到该属性。在我的例子中，值是一个GUID。不确定如何从此值属性获取文本。我的要点是：@HappyDeveloper如果你有一个新的、独立的问题，最好问一个新问题（链接到旧问题，并阐明它的不同之处）。我做了一些与你的答案类似的事情，效果很好。现在我有更大的问题。我有一个可编辑的下拉列表。在不可编辑模式下，当我绑定同一属性时，它实际上会将值绑定到该属性。在我的例子中，值是一个GUID。不确定如何从此值属性获取文本。我的要点是：@HappyDeveloper如果你有一个新的、独立的问题，最好问一个新问题（链接到旧问题，并阐明它的不同之处）。