0

これは私が持っているものです：

<script language="javascript">
$('#click').one('click', function () {
   var html = '<input type="text" class="input-mini" id="new-input" />';
   $(this).parent().append(html);
});
$('#new-input').on('keyup', function (e) {
   alert('A key was pressed');
   if (e.keyCode == 13) {
      alert('Enter key pressed');
   }
});
</script>

他のSOの回答の推奨で、on()動的に作成された要素をバインドするために使用する必要があることがわかりました。<input>私がしたいのは、ユーザーがID内のEnterキーを押した後にAJAX呼び出しが発生することnew-inputです。ただし、いずれかのキーが押されても何も起こりません。

keyupメソッドを新しく追加された<input>要素にバインドするには、何をする必要がありますか？

ありがとう

4

3 に答える 3

3

ドキュメントを読む

.on()動的に作成された要素を常にバインドするとは限りません。次の内部でリッスンするセレクターを渡した場合にのみ、それが行われます。

$('some container').on('click', '.new-input', function() { ... });

また、IDは一意である必要があります。クラスを使用する必要があります。

于 2013-03-03T17:03:56.687 に答える
1

キーアップバインディングが作成された時点では、domに一致する要素はありません。最初のコールバック内で2番目のバインディングを移動してみてください。

<script language="javascript">
    $('#click').one('click', function () {
       var html = $('<input type="text" class="input-mini" />');

       html.on('keyup', function (e) {
           alert('A key was pressed');
           if (e.keyCode == 13) {
               alert('Enter key pressed');
           }
        });

       $(this).parent().append(html);
    });
</script>
于 2013-03-03T17:11:16.270 に答える
1

jsFiddleリンク：http ：//jsfiddle.net/qTd9c/

$('#click').one('click', function () {
    var html = '<input type="text" class="input-mini" id="new-input" />';
    $(this).parent().append(html);

    $('#new-input').on('keyup', function (e) {
        alert('A key was pressed');
        if (e.keyCode == 13) {
            alert('Enter key pressed');
        }
    });

});
于 2013-03-03T17:16:22.060 に答える