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事件传播给他的父母。

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

Answer 2

item.click都在循环，总是在你的项目中单击创建新的输入。您可以检查只one点击使用jQuery：

$("some_selector").one("click",function);