0 
$(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：

4

5 回答 5

2

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

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

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

于 2013-05-06T08:23:50.357 回答
2

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

您需要使用委托事件（使用.on）：

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

...只需要#textbaz在调用时可用，或者在 AJAX 回调中注册事件：

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

...确保调用.keypress将在#textbaz附加文本框之后进行，因此在#textbox创建之后。

于 2013-05-06T08:24:30.830 回答
1

您需要对动态添加的元素使用事件委托：

$('#textbaz').on("keypress", '#textbox', function () {
    console.log($("#textbox").val());
});
于 2013-05-06T08:24:13.890 回答
1

您的代码发送一个 HTTP 请求，然后将一个事件处理程序绑定到#textbox. 稍后，HTTP 响应将到达，success处理程序将创建#textbox.

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

于 2013-05-06T08:25:07.423 回答
0

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

或者，您可以使用

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

用于动态添加的元素。

于 2013-05-06T08:25:01.330 回答