javascript - 在 super 单击上将标签更改为文本框 - mvc

Question

我想在用户单击“编辑”链接时将标签更改为文本框。我正在做this post中讨论的同样的事情，唯一的区别是我使用的是 mvc razor 语法 DisplayFor而不是使用<label class="text-info">Saghir</label> .
我没有得到想要的结果，请告诉我哪里出错了。

HTML:

@Html.DisplayFor(m => m.FirstName, new { @id = "#attribute", @class = "text-info" })
<a href="#" id="edit">Edit</a>

JS:

<script>
$('#edit').click(function () {
    var text = $('.text-info').text();
    var input = $('<input id="attribute" type="text" value="' + text + '" />')
    $('.text-info').text('').append(input);
    input.select();

    input.blur(function () {
        var text = $('#attribute').val();
        $('#attribute').parent().text(text);
        $('#attribute').remove();
    });
});
</script>

Answer 1

试试这个

HTML

@Html.DisplayFor(m => m.FirstName, new { @id = "attribute", @class = "text-info" })
<a href="#" id="edit">Edit</a>

JS

$(document).ready(function (){
  $('#edit').click(function () {
     var text = $('.text-info').text();     
     var input = "<input id='attribute' type='text' class='text-fill' value='" + text + "' onfocusout='myFunction($(this))' />";
     $('.text-info').parent().text('').append(input);         
   });
});

function myFunction(e){
  var text = e.val(); 
  var dad = e.parent();  
  e.remove();
  dad.append("<label for='name' id='attribute' class='text-info'>" + text + "</label>");
}

例如 fiddle - http://jsbin.com/xegusicige/1/edit?html,js,output