Javascript jquery strange error -

$(document).ready(function() {   $.ajax({     type: "get",     url: "textman.php",     success: function(data) {       $('#textbaz').append(data);       var file = data.split(" ");       var set = 0;       console.log(file);       $('#textbaz').append("<br><input id='textbox' type='text' placeholder='type man, on clock!'>");     }   });   $("#textbox").keypress(function() {   console.log($("#textbox").val()); });   return false; }) 

problem is, doesnt console log value of #textbox. no matter type in there, has no effect d:

ajax asynchronous. you're binding keypress listener #textbox before exists in dom. in line $("#textbox").keypress(..., result of $('#textbox') empty object, , no element have binder registered.

you need use delegated events (using .on):

$('#textbaz').on('keypress', '#textbox', function() { ... }); 

... requires #textbaz available @ time of call, or register event in ajax callback:

success: function(data) {   ...   $('#textbaz').append("<br><input id='textbox' type='text' placeholder='type man, on clock!'>");   $('#textbox').keypress(function() { ... }); } 

... ensures call .keypress made after #textbaz has been appended textbox, , hence after #textbox has been created.