Daniel Stakeley Daniel Stakeley - 23 days ago 9
jQuery Question

jQuery - Added Input will not allow me to add text

After I create an input it will not allow me to add text. I am working on a project that allows the user to edit their text by clicking on the added text to make a changes.

http://codepen.io/Stakeley/pen/VmjyVR

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

item.click are in loop, always you click in item a new input is created. You can check for only one click with JQuery:

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