为什么输入字段的值返回undefined

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事件每次单击时都会生成。 下面的代码将在创建新代码之前取消设置按键事件。

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>"); 
     } 
    }); 
    }); 
}); 

Answer 2

问题与您的代码是，只要你双击事件触发，它注册新onkeyup事件。尝试用以下代码替换您的代码：

$(document).ready(function(){ 
       var id; 
       $(".editable").dblclick(function(){ 
        id = $(this).find('p').attr('id'); 
        $(this).html("<input id="+id+" type='text'>"); 

       }); 

       $("body").on("keyup", ".editable input", function(event){ 

        if (event.which == 13){ 
         var valT = document.getElementById(id).value; 
         $(".editable").html("<p id='"+id+"'>" + valT + "</p>"); 
        } 
       }); 

      });