コードで生成された入力要素のkeyupイベントへのアクセス

Question

私のプロジェクトでは、検索パラメータを指定してデータベースからの要求応答データを含む入力フィールドを含むdiv要素を生成します。私は、それが検査でクラスを持っているにもかかわらず、入力が追加を使用して生成されたときに、クラスセレクタは動作しませんが、それにいくつかの余分な仕事をするためにそれにkeyupイベントを使用できるようにする必要があります。

私はそれを証明することCodePenを作成しました：http://codepen.io/leofontes/pen/PNgabB?editors=1111

HTML

<div class="container" id="container"> 
    <button id="button">Click</button><br> 
</div> 

CSS

.container { 
    background-color: #F00; 
    height: 200px; 
    width: 200px; 
} 

.dynamic-input { 
    margin: 5px; 
} 

Javascriptを/ jQueryの

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    }); 


    $('.dynamic-input').keyup(function() { 
    console.log($(this).val()); 
    }); 
}); 

のjQueryコードがうまく動作し、$（document）.ready関数内で生成された入力を使ってテストしましたが、意図したとおりに行ったため、後で生成されたときになぜそれがないのか分かりません。

HTMLで既に読み込まれているクラスで隠れた入力を試してみましたが、どちらも動作しません。

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    }); 


    $(document).on('keyup', '.dynamic-input', function() { 
    console.log($(this).val()); 
    }); 
}); 

Answer 1

あなたが動的に生成された要素のevent delegationが必要になります。

すべてのアイデアや提案が高く評価され、

Answer 2

はこれを試していただきありがとうございます。

$('#container').on('keyup', '.dynamic-input', function() { 
    console.log($(this).val()); 
}); 

Answer 3

これは、要素が作成される前にjqueryバインディングを実行したためです。 $('.dynamic-input').keyupが実行されたとき。ボタンをクリックした後に作成された入力は、まだ存在しません。

Answer 4

問題は、バインディングの作成とは別にボタンを作成することです。あなたがしなければならないことは、入力を作成し、コールバックの一部としてclickイベントをバインドすることです。今は、要素を構文上正しくバインドしていますが、まだ存在しません。だから、あなたが望むものは何ですか。

$(document).ready(function() { 
    $('#button').click(function() { 
    for(var i = 0; i < 5; i++) { 
     $('#container').append('<input type="text" class="dynamic-input">') 
    } 
    //You're still within the scope of the callback, so this is the appropriate location 
    $('.dynamic-input').on('keyup, function() { 
     console.log($(this).val()); 
    }); 

    });