javascript - jQuery - 添加的输入不允许我添加文本

Question

创建输入后，它不允许我添加文本。我正在开发一个项目，该项目允许用户通过单击添加的文本进行更改来编辑他们的文本。

CodePen example

    var $input = $("#change");
var $btn = $("#add");
var $btne = $("#edit");
var $content = $("#content");
$btne.hide();


$btn.click( function(){

 var typedInfo = document.getElementById("change").value;
 var item = $('<li></li>');
 item.append(typedInfo);
 $content.append(item);


 $content.on("click","li", function(){
  });

 item.click( function(){
     $btne.show();
     item.text(" ");
     var typeNew = $('<input type="text" id="newInput" value = "edit">')
     item.append(typeNew);
       $btne.click( function(){
        var editedInput = document.getElementById("newInput").value;
        item.text(editedInput);
        $btne.hide();
   });
 });


});

Answer 1

您可能知道，当您点击一个元素时，点击事件会传播到文档的顶部。

因此，当您单击新输入时，单击会传播到其父级 <li>和 item.click(function(){...})再次调用，代码再次执行，重建所有当前输入区域。

你必须停止 click事件传播给他的 parent 。

typeNew.click( function(e){
  e.stopPropagation();
});

完整代码

item.click(function(){
  $btne.show();
  item.text(" ");
  var typeNew = $('<input type="text" id="newInput" value = "edit">')
  item.append(typeNew);
  // Click on the new input
  typeNew.click( function(e){
    e.stopPropagation();
  });
  // Click on button
  $btne.click( function(){
    var editedInput = document.getElementById("newInput").value;
    item.text(editedInput);
    $btne.hide();
  });
});

stopPropagation documentation