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


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

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

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

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

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

よろしくお願いします

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/20 11:33:56
  • 終了:2013/06/21 13:49:04

ベストアンサー

id:TransFreeBSD No.2

TransFreeBSD回答回数665ベストアンサー獲得回数2672013/06/20 19:38:11

ポイント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>

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

id:spacewarp

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

2013/06/21 13:38:36
id:spacewarp

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

2013/06/21 13:58:15

その他の回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792013/06/20 11:54:09

ポイント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>

  • セレクタにクラスを指定して、複数の要素にイベントハンドラを設定する
  • DOM 標準ではない属性も指定できるので、それをハンドラに渡すパラメータにする
id:spacewarp

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

2013/06/20 12:11:22
id:a-kuma3

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

2013/06/20 12:32:43
id:TransFreeBSD No.2

TransFreeBSD回答回数665ベストアンサー獲得回数2672013/06/20 19:38:11ここでベストアンサー

ポイント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>

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

id:spacewarp

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

2013/06/21 13:38:36
id:spacewarp

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

2013/06/21 13:58:15
id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932013/06/20 23:36:05

ポイント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の日記

id:spacewarp

liveのことまでは考慮していませんでした。
今後そのあたりにハマったときに参考にしたいと思います
ありがとうございました

2013/06/21 13:48:35

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません