複数のテキストボックスにイベントハンドラを添付します（同様のパターンIDで）？

Question

私は、別のソースから得たいくつかの結果に基づいて動的に生成されるいくつかのテキストボックスを持っています。これらのテキストボックスにいくつかのイベントハンドラを追加して、キーを押さえて、入力されたものがすべて数字であることを確認します。

私はそうのように、JSONレスポンス内の配列の長さに基づいて、これらのテキストボックスを生成：

for(i=0;i<data.routesout.length;i++) 
{   
      content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>'; 
      content += '<input type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent>';    
} 

がどのように私はこれらの潜在的な入力の全てに単一のイベントハンドラをアタッチすることができますか？あなたがタグ付けされてきた

$('input[id^="route"]').live('keyup', function(){... 

Answer 1

：

Answer 2

あなたがその場でこれらを作成している場合、あなたはliveを使用してイベントを添付する必要がある場合がありますことをstarts withセレクタ

$('input[id^="route"]').keyup(function(){... 

注意を使用することができますjQueryの質問には、コンテンツを構築するためにライブラリを使用していない理由がわかります：

var content = []; 
for (var i = 0; i < data.routesout.length; ++i) { 
    content.push($('<label/>', { 'for': 'route' + i, text: data.routesout[i].name })); 
    content.push($('<input/>', { change: yourEventHandler, type: 'text', name: 'route' + i, id: 'route' + i, value: date.routesout[i].percent, change: yourEventHandler })); 
} 

このようにすることで、ハンドラ要素を作成するときにハンドラ要素を要素ごとバインドできます。 （例として「変更」を使用しましたが、同じ方法で必要なイベントのハンドラをバインドすることができます）

最後に、作成した要素をすべて追加するか、追加することができますアレイを構築する代わりに移動します。

Answer 3

これはどうですか？

for(i=0;i<data.routesout.length;i++){   
    content += '<label for="route' + i + '">' + data.routesout[i].name + '(%)</label>'; 
    content += '<input onkeypress="doSomething(this)" type="text" name="route' + i + '" id="route' + i + '" value="' + data.routesout[i].percent + '>';    
} 

function doSomething(element){ 
    /* this function will be called when user presess key inside a textbox */ 
}