為什么輸入字段的值返回未定義

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

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

            });