イベントハンドラを複数のテキストボックスに関連付ける（同様のパターンIDで）

Question

イベントハンドラを複数のテキストボックスに関連付ける（同様のパターンIDで）

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

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

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

How can I attach a single event handler to all of these potential inputs?

0

追加された 27 10月 2011 〜で 02:42 著者 sxthomson

ビュー: 43

源

3 答え

あなたはjQueryを使って質問にタグを付けました。なぜあなたはコンテンツを構築するためにライブラリを使用していないのでしょうか？

var content = [];
for (var i = 0; i < data.routesout.length; ++i) {
  content.push($('', { '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 }));
}

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

最後に、作成した要素をすべて追加することもできますし、配列を作成する代わりに追加することもできます。

3

追加された 27 10月 2011 〜で 02:49 著者 Pointy

源

私はjQuery（そして一般的にはWebプログラミング、正直ならデスクトップ.NET開発者の方が新しい）ので、あなたはそれを行うことができるか分からなかった。私はそれが本当に好きです。ありがとう！

追加された 27 10月 2011 〜で 03:00, 著者 sxthomson, 源

これはどうですか？

for(i=0;i' + data.routesout[i].name + '(%)'; 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 */ }

1

追加された 27 10月 2011 〜で 02:51 著者 Marian Bazalik

源

著者 Adam Hopkinson · Answer 1 · 2011-10-27T02:45Z

開始日 セレクタを使用することができます

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

これらをオンザフライで作成する場合は、 ライブを使用してイベントを添付する必要があります。 em> ：

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

著者 Marian Bazalik · Answer 2 · 2011-10-27T02:51Z

これはどうですか？

for(i=0;i' + data.routesout[i].name + '(%)';
  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 */
}