按钮单击时将标签转换为输入字段的问题

我在这里讨论的post中修改了答案。
在我的应用程序中，我有两个按钮 – 编辑和保存 。 单击编辑时， labels将转换为input字段，用户可以在其中编辑内容并进行保存。

一切正常，但问题是当用户点击两次编辑按钮时， input字段中的内容变为空白，即值变为空白。
请建议我解决这个问题。 我哪里错了？

 
 @Html.DisplayFor(m => m.Company) 
 
   
  $(document).ready(function () { $('#edit').click(function () { // for company name var companyName = $('.text-cname').text(); var lblCName = $('') $('.text-cname').text('').append(lblCName); lblCName.select(); }); $('#btnSave').click(function () { var text = $('#attrCName').val(); $('#attrCName').parent().text(text); $('#attrCName').remove(); }); });  

Answer 1

当您第二次单击companyName的值为空时，这就是值变为空白的原因。 这是一个非常简单的解决方案，但您将失去对易于修复的编辑框的关注。

$（’＃edit’）。click（function（）{

  /*for company name*/ var companyName = $('.text-cname').text(); var lblCName = $(''); if(companyName != "") $('.text-cname').text('').append(lblCName); lblCName.select(); }); 

Answer 2

您可以使用replaceWith()方法将label转换为textarea 。

 $("#edit").click(function(){ var text = $("label").text(); $("label").replaceWith(""); }); $("#save").click(function(){ var text = $("input ").val(); $("input ").replaceWith(""+text+""); }); 

  Edit Save 

 Text 

Answer 3

最简单的修复方法是在您单击它后禁用编辑按钮，并在保存后再次启用它：

 $(document).ready(function () { $('#edit').click(function () { $(this).prop('disabled', true); /*for company name*/ var companyName = $('.text-cname').text(); var lblCName = $('') $('.text-cname').text('').append(lblCName); lblCName.select(); }); $('#btnSave').click(function () { $('#edit').prop('disabled', false); var text = $('#attrCName').val(); $('#attrCName').parent().text(text); $('#attrCName').remove(); }); }); 

Answer 4

试试这个

 function EditContent(){ var companyName = $('.text-cname').text(); var lblCName = $(''); if (companyName != "") { $('.text-cname').text('').append(lblCName); } lblCName.select(); } function SaveContent(){ var text = $('#attrCName').val(); $('#attrCName').parent().text(text); $('#attrCName').remove(); } 

  
 Company