javascript - Javascript jquery 奇妙なエラー

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:

score 2 · Accepted Answer

これを試してください-（動的に作成された要素のイベント委譲 with.on()）

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

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

score 2 · Accepted Answer

AJAX は非同期です。リスナーがDOMに存在する前に、keypressリスナーをバインドしています。#textboxの行$("#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

score 1 · Accepted Answer

動的に追加された要素には、イベント委任を使用する必要があります。

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

score 1 · Accepted Answer

コードは HTTP リクエストを送信し、イベントハンドラをのすべてのインスタンスにバインドします#textbox。しばらくして HTTP 応答が到着し、successハンドラーがを作成します#textbox。

イベントハンドラーをバインドするためのロジックをハンドラーに移動しsuccessます。

score 0 · Accepted Answer

$.ajax は非同期呼び出しであるため$("#textbox").keypress()、success 関数に html を追加する前に実行される可能性が高くなります。$("#textbox").keypress を、成功関数内の append() 呼び出しの直後に移動すると、機能するはずです。

代わりに使用できます

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

動的に追加された要素用。

javascript - Javascript jquery 奇妙なエラー

5 に答える 5

Related

Reference