Javascript 将跨度转换为输入

我正在开发web应用程序，我有这样一个要求，每当用户点击span内的文本时，我需要将其转换为输入字段，在模糊上，我需要再次将其转换回span。因此，我在我的一个jsp页面中使用以下脚本

Java脚本：

<script type="text/javascript">
function covertSpan(id){

    $('#'+id).click(function() {
        var input = $("<input>", { val: $(this).text(),
                                   type: "text" });
        $(this).replaceWith(input);
        input.select();   
    }); 

      $('input').live('blur', function () {
            var span=$("<span>", {text:$(this).val()});
            $(this).replaceWith(span);

      });         
}

JSP代码：

<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span>

---

现在我的问题是，一切都只是第一次好起来。我的意思是，每当我第一次点击span内的文本时，它会转换为输入字段，然后再次点击模糊，它会从输入字段转换回普通文本。但是，如果再次尝试这样做，它将不起作用。上面的脚本有什么问题？

首先，您需要将单击处理程序更改为使用live。不过，您应该注意，live已经被弃用了很长一段时间。您应该在这两种情况下都使用

---

第二，当您用span替换输入时，您不会给元素一个id。因此，元素不再匹配您的click处理程序的选择器

---

就我个人而言，我会采取完全不同和更简单的方法。我将把span和input并排放在我的标记中。一个将被隐藏，而另一个将被显示。这将减少您在尝试重新创建DOM元素和提高性能时出错的机会，因为您不会经常从DOM中添加/删除元素。

我知道您认为元素替换是件好事，但是，我会使用提示获取文本。为什么？对于用户来说，它更简单，实际上也更漂亮。如果你想知道怎么做，我给你看看

html:

---

最好将您的dom结构更改为如下所示：请注意，范围和输入并排在一个共享的parent.inputSwitch中

可以通过稍微更改两行代码来创建更通用的id为的版本： $input.attrID，loadNum；变成$input.attrID，$this.attrID；-这样，它只需获取当前id并保留它，不管它是什么

同样地， $span.attrID，loadNum；变成$span.attrID，$this.attrID

---

这只允许将函数应用于任何div。添加两行类似的代码后，id和class都可以正常工作。请参阅。

我对代码做了一些更改，通过使用此输入类型不能为空，它将返回其实际值

 var switchToInput = function () {
        var $input = $("<input>", {
            val: $(this).text(),
            type: "text",
            rel : jQuery(this).text(),
        });
        $input.addClass("loadNum");
        $(this).replaceWith($input);
        $input.on("blur", switchToSpan);
        $input.select();
    };
    var switchToSpan = function () {
            if(jQuery(this).val()){
                        var $text = jQuery(this).val();
                } else {
                      var $text = jQuery(this).attr('rel');
                }
        var $span = $("<span>", {
            text: $text,
        });
        $span.addClass("loadNum");
        $(this).replaceWith($span);
        $span.on("click", switchToInput);
    }
    $(".loadNum").on("click", switchToInput);

---

JSFIDLE:-

因此，元素不再匹配单击处理程序的选择器-哪个单击处理程序？covertSpan只被调用一次，我看不到其他点击处理程序附件。这主意不错！我必须试一下。我现在有一个问题，在更新我的jquery版本后，上面的代码不起作用。什么版本？我只是在2.0和2.xEdge中运行了它，它运行得很好。发生了什么事？控制台中显示任何错误？还有用于就地编辑的jQuery插件：

$(function()
{
  $('span.editable').click(function()
  {
    var span = $(this);
    var text = span.text();

    var new_text = prompt("Change value", text);

    if (new_text != null)
      span.text(new_text);
  });
});

<div class="inputSwitch">
First Name: <span>John</span><input />
</div>
<div class="inputSwitch">
Last Name: <span>Doe</span><input />
</div>

var $inputSwitches = $(".inputSwitch"),
  $inputs = $inputSwitches.find("input"),
  $spans = $inputSwitches.find("span");
$spans.on("click", function() {
  var $this = $(this);
  $this.hide().siblings("input").show().focus().select();
}).each( function() {
  var $this = $(this);
  $this.text($this.siblings("input").val());
});
$inputs.on("blur", function() {
  var $this = $(this);
  $this.hide().siblings("span").text($this.val()).show();
}).on('keydown', function(e) {
  if (e.which == 9) {
    e.preventDefault();
    if (e.shiftKey) {
      $(this).blur().parent().prevAll($inputSwitches).first().find($spans).click();
    } else {
      $(this).blur().parent().nextAll($inputSwitches).first().find($spans).click();
    }
  }
}).hide();

 var switchToInput = function () {
        var $input = $("<input>", {
            val: $(this).text(),
            type: "text",
            rel : jQuery(this).text(),
        });
        $input.addClass("loadNum");
        $(this).replaceWith($input);
        $input.on("blur", switchToSpan);
        $input.select();
    };
    var switchToSpan = function () {
            if(jQuery(this).val()){
                        var $text = jQuery(this).val();
                } else {
                      var $text = jQuery(this).attr('rel');
                }
        var $span = $("<span>", {
            text: $text,
        });
        $span.addClass("loadNum");
        $(this).replaceWith($span);
        $span.on("click", switchToInput);
    }
    $(".loadNum").on("click", switchToInput);