-1 
$(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:

Improve this question
4
  • it just doesnt console log the value of #textbox This is not a real error and it's not strange. Commented May 6, 2013 at 8:25
  • @undefined — No, but it is a problem. (And this problem doesn't cause any error messages to be reported). Commented May 6, 2013 at 8:25
  • A bigger problem is the nearly infinite permutations of this question on SO. Surely this is a duplicate? Commented May 6, 2013 at 8:33
  • 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. Commented Jul 30, 2024 at 5:58

5 Answers 5

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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/

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

You need to use event delegation for dynamically added element:

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

Comments

0

$.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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.