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

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

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

$(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>

最佳答案

我在您的代码中发现了两个问题。首先，是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>");
      }
    });
  });
});

关于javascript - 为什么输入字段的值返回未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46848126/