javascript - 为什么输入字段的值返回未定义

Question

我正在研究一种更改页面内容的方法。

我运行脚本。我可以通过双击该段落来更改文本一次，但第二次它会返回未定义。

$(document).ready(function(){
  $(".editable").dblclick(function(){
    var id = $("this p").attr('id');
    $(this).html("<input id="+id+" type='text'>");
    $(this).keyup(function(event){
      if (event.which == 13){
        //alert(id);
        var valT = document.getElementById(id).value;
        $(this).html("<p id='"+id+"'>" + valT + "</p>");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable" ondblclick="">
  <p id="asd">first Paragraph</p>
</div>

Answer 1

我在您的代码中发现了两个问题。首先是 id 的选择器，其次是每次单击时都会生成 keyup 事件。下面的代码将在创建新事件之前取消设置 keyup 事件。

https://jsfiddle.net/24kjchxj/

$(document).ready(function(){
  $(".editable").dblclick(function(){
    var id = $(this).find("p").attr('id');
    $(this).html("<input id="+id+" type='text'>");
    $(this).off('keyup');
    $(this).keyup(function(event){
      if (event.which == 13){
        //alert(id);
        var valT = document.getElementById(id).value;
        $(this).html("<p id='"+id+"'>" + valT + "</p>");
      }
    });
  });
});