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;
})

问题是，它只是没有控制台记录#textbox的值。无论我输入什么，它都没有效果D：

Answer 1

试试这个 - （使用.on()动态创建的元素的事件委派）

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

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

Answer 2

AJAX是异步的。在keypress之前，您将#textbox侦听器绑定到$("#textbox").keypress(...。在$('#textbox')行中，.on的结果将是一个空对象，因此没有元素会注册一个活页夹。

您需要使用委派事件（使用$('#textbaz').on('keypress', '#textbox', function() { ... });）：

#textbaz

...只需要在调用时success: function(data) { ... $('#textbaz').append("<br><input id='textbox' type='text' placeholder='Type it man, your on the clock!'>"); $('#textbox').keypress(function() { ... }); }可用，或者在AJAX回调中注册事件：

.keypress

...这可确保在#textbaz附加文本框之后调用#textbox，因此在创建{{1}}之后。

Answer 3

您需要使用event delegation来动态添加元素：

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

Answer 4

您的代码发送HTTP请求，然后将事件处理程序绑定到#textbox的所有实例。稍后，HTTP响应将到达，success处理程序将创建#textbox。

将用于绑定事件处理程序的逻辑移动到success处理程序。

Answer 5

$ .ajax是异步调用，因此在您在成功函数中附加html之前，很可能会执行$("#textbox").keypress()。在成功函数中的append（）调用之后直接移动$（“＃textbox”）。keypress，它应该可以正常工作。

或者你可以使用

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

用于动态添加的元素。

Javascript jquery奇怪的错误

5 个答案: