3

次のように、jQuery の 1 つの関数で複数のイベント ハンドラーを定義することが可能です。

$(document).on({
    'event1': function() {
        //do stuff on event1
    },
    'event2': function() {
        //do stuff on event2
    },
    'event3': function() {
        //do stuff on event3
    },
    //...
});

次に、これを行うことができます。

$(document).on('click', '.clickedElement', function() {
    //do stuff when $('.clickedElement') is clicked
});

このようなことも可能かどうか疑問に思っていました (次のコードは機能しません。説明のためだけです)。

$(document).on('click', {
    '.clickedElement1', function() {
        //do stuff when $('.clickedElement1') is clicked
    },
    '.clickedElement2', function() {
        //do stuff when $('.clickedElement2') is clicked
    },
    //... and so on
});

このコードは、'.clickedElementX' の後の "," に関するエラーを表示します。私もこのように試しました：

$(document).on('click', {
    '.clickedElement1': function() {
        //do stuff when $('.clickedElement1') is clicked
    },
    //... and so on
});

次に、エラーはありませんが、関数も実行されません。このようにすべてのクリック ハンドラーを 1 か所に集める方法はありますか、それとも常に次のようにする必要がありますか。

$(document).on('click', '.clickedElement1', function() {
    //do stuff when $('.clickedElement1') is clicked
});
$(document).on('click', '.clickedElement2', function() {
    //do stuff when $('.clickedElement2') is clicked
});
//... and so on

助けてくれてありがとう！

4

5 に答える 5

2

連鎖できます：

$(document).on({
    click: function() {
        //click on #test1
    },
    blur: function() {
        //blur for #test1
    }
}, '#test1').on({
    click: function() {
        //click for #test2
    }
}, '#test2');

フィドル

于 2013-07-17T14:20:15.753 に答える
1

短い答え: いいえ、それらをすべて個別にバインドする必要があります。

長い答え: サイトの「インフラストラクチャ」を作成し、すべてのイベントを 1 か所にまとめることができます。例えば

var App = function(){
  // business logic

  return {
    Settings: { ... },
    Events: {
      'event1': function(){
      },
      'event2': function(){
      },
      'event3': function(){
      }
    }
  }
}();

次に、それを配線します。

$(document).on(App.Events);

次に、内部的にAppオブジェクトに新しいバインディングを追加できますが、まだ 1 か所にしか配線されていません (jQuery に関する限り)。Appその後、 (例: )内である種のサブスクライバー モデルを作成できますが、新しい各サブスクリプションは依然として単一のバインディングApp.Subscribe('click', function(){ ... })を介してのみ接続されます。.on()

しかし、私見ですが、これは多くのオーバーヘッドであり、見返りはほとんどありません。

于 2013-07-17T14:20:54.877 に答える
1 
$(document).on('click' , function(e){
 if($(e.target).hasClass("some-class")){
  //do stuff when .some-class is clicked
 }
 if($(e.target).hasClass("some-other-class")){
  //do stuff when .some-other-class is clicked
 }
});

あなたが望むものを選ぶことができsome-classます

于 2013-07-17T14:21:22.087 に答える
0

ヘルパー関数を使用できます。

function oneplace(all){
    for (var query in all){
        $(query).on('click', all[query]);
    }
}

そして、次のように呼び出します。

oneplace(
    {'#ele1':function(){
             alert('first function');
         },
     '#ele2':function(){
             alert('second function'); 
         }});

jsfiddle はこちら: http://jsfiddle.net/5zwkf/

于 2013-07-17T14:26:15.440 に答える