0

いくつかのコントロールを動的に生成しているとします (jQuery を使用した例):

for (var c=0 ; c<100 ; c++) {
  $(body).append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

また、クリックされたボタン (マウスオーバーなど) に応じて異なるアクションを実行したいのですが、クリックされているボタンを認識できるようにハンドラーをアタッチするためのベスト プラクティスは何ですか? 私は3つの選択肢を考えることができます：

  1. 同じハンドラーを (JavaScript 経由で) すべてのボタンにアタッチし、ハンドラーに要素 ID を解析させて、どのボタンがクリックされたかを判断します。
  2. コントロールの HTML を生成するときにハンドラーをインラインで追加します (つまり、onclick="do_something('+c+');" を持っています)。
  3. ハンドラの引数にボタン番号が設定されている要素ごとに、異なるハンドラを (ループなどで) アタッチします。

どちらの方法が好ましいですか、それとも別の方法がありますか?

編集：

申し訳ありませんが、生成される要素の数は可変であり、ハンドラーにはボタン番号のみが必要であることに言及する必要があります (つまり、ボタンごとに完全に異なるハンドラー関数ではありません)。簡単なユースケースの例は、ユーザーに順序付けさせたい ajax を介して取得したリストです。この場合、ハンドラーはリストのインデックス番号のみを必要とします。

個別のハンドラーを持つ固定数の要素の場合、Davidの答えは理にかなっています。

4

2 に答える 2

1

この場合、イベント委任が優先されます。

$('body').on('click', 'input', function(e) {
    // do something with this (the element that was clicked)
    console.log(this.value);
});

このようにして、1 つのイベント リスナーのみがボタンの親 (bodyこの例では ) にアタッチされますが、ハンドラーでクリックされたボタン要素に引き続きアクセスできます。

次のように、アクションをボタンに f.ex マップできます。

for (var c=0 ; c<100 ; c++) {
    $('body').append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

var actions = {
    btn_0: function() {
        console.log('btn 0 clicked');
    },
    btn_1: function() {
        console.log('btn 1 clicked');
    }
    // etc...
};

$('body').on('click', 'input', function(e) {
    $.isFunction(actions[this.id]) && actions[this.id].call(this);
});
于 2013-02-20T20:16:48.643 に答える