jQueryで
$(function(){
$("#btn").on("click", function() {
alert "hello";
});
});
というのを書いたりしますが
サーバー側で動的にボタンを生成したときに、
１.#btn1~#btnNまでのボタンすべてにクリックイベントを設定したい
２.クリックで呼ばれる関数にクリックされたボタン（#btn1~#btnN）によってそれぞれ違う引数を渡したい。
このようなとき、どんな風に書いたら良いでしょうか。
よろしくお願いします
No.2
668
268
33pt
若干尻馬に乗りつつ
パラメータはidをキーとする連想配列にします。
利点はパラメータとしてオブジェクトも扱えること。
欠点はidをパラメータ定義側とhtml要素側で整合させる必要が有ること。
シンプルなデータならa-kuma3さんのが適していると思います。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { var dataset = { btn1:{ name:"yahoo" ,msg:"1" }, btn2:{ name:"google" ,msg:"2" }, btn3:{ name:"goo" ,msg:"3" }, btn4:{ name:"hatena" ,msg:"4" }, btn5:{ name:"amazon" ,msg:"5" }, btn6:{ name:"wikipedia" ,msg:"6" } }; $(".btn_x").click(function() { // オブジェクトも扱える var val = dataset[$(this).attr("id")]; alert(val.name + ":" + val.msg); }); }); </script> <button id="btn1" class="btn_x">1</button><br> <button id="btn2" class="btn_x">2</button><br> <button id="btn3" class="btn_x">3</button><br> <button id="btn4" class="btn_x">4</button><br> <button id="btn5" class="btn_x">5</button><br> <button id="btn6" class="btn_x">6</button><br>
これは後で参照する方法
動的に変更も可能
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { // jQueryのeachを使ってみる // http://semooh.jp/jquery/api/utilities/jQuery.each/object%2C+callback/ $.each({ // これはデータ部。変数に入れれば他所で定義も可能 btn1:{ name:"yahoo" ,msg:"1" }, btn2:{ name:"google" ,msg:"2" }, btn3:{ name:"goo" ,msg:"3" }, btn4:{ name:"hatena" ,msg:"4" }, btn5:{ name:"amazon" ,msg:"5" }, btn6:{ name:"wikipedia" ,msg:"6" } }, function(id, val) { $("#" + id).click(function() { // オブジェクトも扱える alert(val.name + ":" + val.msg); }); }); }); </script> <button id="btn1">1</button><br> <button id="btn2">2</button><br> <button id="btn3">3</button><br> <button id="btn4">4</button><br> <button id="btn5">5</button><br> <button id="btn6">6</button><br>
こっちは予めそれぞれにイベントを割り付けておく方法
No.1
49732154
34pt
いろんなやり方があると思いますけど、一例を。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { // クラスのセレクタを使う $(".btn_x").click(function() { // DOM にない属性も使える alert($(this).attr("my_value")); }); }); </script> <!-- ・クリックを処理したいボタンには、クラス btn_x を指定する ・イベントハンドラに渡したい値を、独自の属性 my_value に持たせる --> <button id="btn1" class="btn_x" my_value="yahoo" >1</button><br> <button id="btn2" class="btn_x" my_value="google" >2</button><br> <button id="btn3" class="btn_x" my_value="goo" >3</button><br> <button id="btn4" class="btn_x" my_value="hatena" >4</button><br> <button id="btn5" class="btn_x" my_value="amazon" >5</button><br> <button id="btn6" class="btn_x" my_value="wikipedia" >6</button><br>
シンプルでわかりやすいですね。ありがとうございます。
他の方法もいろいろありそうなので、もうしばらく回答受付のままにしておきます。
セレクタの指定の仕方は、HTML の構造に合わせて指定してあげれば良いとして、パラメータをどう渡すか、ですよね。
No.2
668268
ここでベストアンサー
33pt
若干尻馬に乗りつつ
パラメータはidをキーとする連想配列にします。
利点はパラメータとしてオブジェクトも扱えること。
欠点はidをパラメータ定義側とhtml要素側で整合させる必要が有ること。
シンプルなデータならa-kuma3さんのが適していると思います。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { var dataset = { btn1:{ name:"yahoo" ,msg:"1" }, btn2:{ name:"google" ,msg:"2" }, btn3:{ name:"goo" ,msg:"3" }, btn4:{ name:"hatena" ,msg:"4" }, btn5:{ name:"amazon" ,msg:"5" }, btn6:{ name:"wikipedia" ,msg:"6" } }; $(".btn_x").click(function() { // オブジェクトも扱える var val = dataset[$(this).attr("id")]; alert(val.name + ":" + val.msg); }); }); </script> <button id="btn1" class="btn_x">1</button><br> <button id="btn2" class="btn_x">2</button><br> <button id="btn3" class="btn_x">3</button><br> <button id="btn4" class="btn_x">4</button><br> <button id="btn5" class="btn_x">5</button><br> <button id="btn6" class="btn_x">6</button><br>
これは後で参照する方法
動的に変更も可能
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { // jQueryのeachを使ってみる // http://semooh.jp/jquery/api/utilities/jQuery.each/object%2C+callback/ $.each({ // これはデータ部。変数に入れれば他所で定義も可能 btn1:{ name:"yahoo" ,msg:"1" }, btn2:{ name:"google" ,msg:"2" }, btn3:{ name:"goo" ,msg:"3" }, btn4:{ name:"hatena" ,msg:"4" }, btn5:{ name:"amazon" ,msg:"5" }, btn6:{ name:"wikipedia" ,msg:"6" } }, function(id, val) { $("#" + id).click(function() { // オブジェクトも扱える alert(val.name + ":" + val.msg); }); }); }); </script> <button id="btn1">1</button><br> <button id="btn2">2</button><br> <button id="btn3">3</button><br> <button id="btn4">4</button><br> <button id="btn5">5</button><br> <button id="btn6">6</button><br>
こっちは予めそれぞれにイベントを割り付けておく方法
$.each使う方法もいいですね
$.eachの第2引数のコールバック関数の引数idに要素のIDが入ってくるのが良い感じですね。
質問終了してから気付いたのですが、
DOM要素のIDが引数として渡されてくるわけではなく
連想配列内に記述したIDが渡されてきてるんですね。
ちょっと勘違いしていました＾＾；
No.3
1504493
33pt
動的にボタンを生成したいってのはliveみたいな書き方を知りたいのかなと思った。
#btnNは[id^="btn"]て書けばidのままで対応できます。
引数の渡し方は回答1のようにボタンのタグの属性を使うのもあり。下記のデモは配列のインデックスを使ってみました。
http://jsfiddle.net/cherenkov/8T9fG/
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> var args = ['おにぎり', 'りんご', 'ごりら', 'らっぱ', 'ぱんつ']; $(function() { $('#geneBtn').on('click', function(e) { var randomId = Math.floor( Math.random() * 5 ); $('<input type="button" id="btn' + randomId + '" value="' + randomId + '">').appendTo('body'); }); $(document).on('click', '[id^="btn"]', function() { alert(args[this.value]); }); }); </script> <style> </style> </head> <body> <input type="button" id="geneBtn" value="ボタン生成"> </body> </html>
参考：jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
liveのことまでは考慮していませんでした。
今後そのあたりにハマったときに参考にしたいと思います
ありがとうございました
12
9
2
$.each使う方法もいいですね
2013/06/21 13:38:36$.eachの第2引数のコールバック関数の引数idに要素のIDが入ってくるのが良い感じですね。
質問終了してから気付いたのですが、
2013/06/21 13:58:15DOM要素のIDが引数として渡されてくるわけではなく
連想配列内に記述したIDが渡されてきてるんですね。
ちょっと勘違いしていました＾＾；