人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryのイベント設定について

jQueryで
$(function(){
$("#btn").on("click", function() {
alert "hello";
});
});

というのを書いたりしますが

サーバー側で動的にボタンを生成したときに、

1.#btn1~#btnNまでのボタンすべてにクリックイベントを設定したい
2.クリックで呼ばれる関数にクリックされたボタン(#btn1~#btnN)によってそれぞれ違う引数を渡したい。

このようなとき、どんな風に書いたら良いでしょうか。

よろしくお願いします

●質問者: spacewarp
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●34ポイント

いろんなやり方があると思いますけど、一例を。

<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>


spacewarpさんのコメント
シンプルでわかりやすいですね。ありがとうございます。 他の方法もいろいろありそうなので、もうしばらく回答受付のままにしておきます。

a-kuma3さんのコメント
セレクタの指定の仕方は、HTML の構造に合わせて指定してあげれば良いとして、パラメータをどう渡すか、ですよね。

2 ● TransFreeBSD
●33ポイント ベストアンサー

若干尻馬に乗りつつ
パラメータは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>

こっちは予めそれぞれにイベントを割り付けておく方法


spacewarpさんのコメント
$.each使う方法もいいですね $.eachの第2引数のコールバック関数の引数idに要素のIDが入ってくるのが良い感じですね。

spacewarpさんのコメント
質問終了してから気付いたのですが、 DOM要素のIDが引数として渡されてくるわけではなく 連想配列内に記述したIDが渡されてきてるんですね。 ちょっと勘違いしていました^^;

3 ● Cherenkov
●33ポイント

動的にボタンを生成したいってのは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の日記


spacewarpさんのコメント
liveのことまでは考慮していませんでした。 今後そのあたりにハマったときに参考にしたいと思います ありがとうございました
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ