Bir seçiciye birden çok olay işleyici içeren JQuery .on () yöntemi

Jquery .on () yönteminin kendisiyle ilişkilendirilmiş birden çok olaya sahip belirli bir seçiciyle nasıl kullanılacağını anlamaya çalışmak. Daha önce .live () yöntemini kullanıyordum, ancak .on () ile aynı başarıyı nasıl yapacağımı tam olarak bilmiyordum. Lütfen aşağıdaki koduma bakın:

$("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.
  }
});

Arayarak birden fazla olay atayabileceğimi biliyorum:

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

Ancak .on () yönteminin doğru şekilde kullanılmasının şöyle olacağını düşünüyorum:

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

Bunu başarmanın bir yolu var mı? Veya buradaki en iyi uygulama hangisidir? Aşağıdaki kodu denedim, ama zar yok.

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

Şimdiden teşekkürler!

Bu tam tersi . Yazmalısınız:

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

Ayrıca, aynı işlevi yürüten aynı seçiciye bağlı birden çok olay işleyiciniz varsa,

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

Aynı işlevi farklı olaylarda kullanmak istiyorsanız, aşağıdaki kod bloğu kullanılabilir

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

Buradan gerçekten yararlı ve temel bir şey öğrendim .

zincirleme işlevleri dahil olmak üzere çoğu jQuery Fonksiyonlar çalışır bu durumda çok yararlıdır üzerinde çok fonksiyon çıkışı.

Çoğu jQuery işlevinin çıktısı giriş nesneleri kümeleri olduğu için çalışır, böylece bunları hemen kullanabilir ve daha kısa ve daha akıllı hale getirebilirsiniz

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

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

Aynı olayları / işlevleri bu şekilde birleştirebilirsiniz:

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

Aşağıdaki kodu deneyin:

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

  }
);