Question

我正在研究改变页面内容的方法。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

https://jsfiddle.net/24kjchxj/

class A
{
    public function method1() {}
    public function method2() {}
}

class B
{
    public function method1() {}
    public function method3() {}
}

class Factory
{
    public static function create($className)
    {
        return new $className();
    }
}

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

            });

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

2 个答案: