Javascript jquery strange error

Question

$(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 it man, your on the clock!'>");
 }
 });
 $("#textbox").keypress(function() {
 console.log($("#textbox").val());
});
 return false;
})

Problem is, it just doesnt console log the value of #textbox. No matter what i type in there, it has no effect D:

• Ram: it just doesnt console log the value of #textbox This is not a real error and it's not strange.
• Quentin: @undefined — No, but it is a problem. (And this problem doesn't cause any error messages to be reported).
• Dagg Nabbit: A bigger problem is the nearly infinite permutations of this question on SO. Surely this is a duplicate?
• dumbass: This question is similar to: Event binding on dynamically created elements?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

Answer 1

AJAX is asynchronous. You're binding a keypress listener to #textbox before it exists in the DOM. In the line $("#textbox").keypress(..., the result of $('#textbox') will be an empty object, and so no element will have a binder registered.

You need to use delegated events (using .on):

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

... which only requires that #textbaz is available at the time of the call, or register the event in the AJAX callback:

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

... which ensures that the call to .keypress will be made after #textbaz has been appended with the textbox, and hence after #textbox has been created.

Answer 2

Try this - (event delegation for dynamically created element's with .on())

$('#textbaz').on('keypress',"#textbox",function() {
 console.log($(this).val());
});

http://api.jquery.com/on/

Answer 3

Your code sends an HTTP request and then binds an event handler to all instances of #textbox. Sometime later the HTTP response will arrive and the success handler will create #textbox.

Move the logic for binding the event handler into the success handler.

Answer 4

You need to use event delegation for dynamically added element:

$('#textbaz').on("keypress", '#textbox', function () {
 console.log($("#textbox").val());
});

Answer 5

$.ajax is an async call, so $("#textbox").keypress() will be most likely executed before you attached the html in your success function. Move $("#textbox").keypress directly after your append() call within the success function and it should work.

Alternately you can use

.on('keypress', 'selector', function($element) {/*code*/}); 

for dynamically added elements.