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

：あなたはjQueryを使ってのみoneクリックを確認することができます。

したがって、新しい入力をクリックすると、そのクリックは親の<li>に伝播され、item.click(function(){...})がもう一度呼び出され、コードはもう1回実行され、現在の入力領域がすべて再構築されます。

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新しい入力が作成されている項目をクリックし、常に、ループです。あなたが要素をクリックすると、クリックイベントは、文書の先頭に伝播され、知っているされるように

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