web-dev-qa-db-ja.com

1つのセレクターに対する複数のイベントハンドラーを持つJQuery .on（）メソッド

複数のイベントが関連付けられている特定のセレクターでJquery .on（）メソッドを使用する方法を理解しようとしています。以前は.live（）メソッドを使用していましたが、.on（）で同じ偉業を達成する方法がよくわかりません。以下の私のコードをご覧ください：

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});

次を呼び出すことで複数のイベントを割り当てることができることを知っています：

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

しかし、.on（）の適切な使用は次のようになると信じています。

   $("table.planning_grid").on('mouseenter','td',function(){});

これを達成する方法はありますか？または、ここでのベストプラクティスは何ですか？以下のコードを試しましたが、サイコロは使いません。

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

前もって感謝します！

javascriptjqueryjquery-selectorsjquery-1.7
124
butangphp

その逆 です。あなたが書く必要があります：

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");
241
Frédéric Hamidi

また、同じ関数を実行する同じセレクターに複数のイベントハンドラーが接続されている場合は、

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});
167
Pirijan

異なるイベントで同じ関数を使用する場合は、次のコードブロックを使用できます

$('input').on('keyup blur focus', function () {
   //function block
})
16
thakurdev

here から本当に便利で基本的なことを学びました。

chaining関数は、この場合非常に便利です。これは、on関数出力を含むほとんどのjQuery関数で機能します。

ほとんどのjQuery関数の出力は入力オブジェクトセットであるため、すぐに使用でき、より短く、よりスマートになります。

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);
9
Iman Abidi

そして、この方法で同じイベント/機能を組み合わせることができます：

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");
7
angelmedia

次のコードを試してください。

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);
1
Yogesh