Metode JQuery .on () dengan beberapa penangan kejadian ke satu selektor

Mencoba mencari cara untuk menggunakan metode Jquery .on () dengan selektor tertentu yang memiliki beberapa kejadian yang terkait dengannya. Saya sebelumnya menggunakan metode .live (), tetapi tidak begitu yakin bagaimana mencapai prestasi yang sama dengan .on (). Silakan lihat kode saya di bawah ini:

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

Saya tahu saya dapat menetapkan beberapa acara dengan menelepon:

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

Tapi saya yakin penggunaan yang tepat dari .on () akan seperti ini:

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

Apakah ada cara untuk menyelesaikan ini? Atau apa praktik terbaik di sini? Saya mencoba kode di bawah ini, tetapi tidak ada dadu.

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

Terima kasih sebelumnya!

Itu sebaliknya . Anda harus menulis:

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

Selain itu, jika Anda memiliki beberapa penangan peristiwa yang terpasang ke pemilih yang sama yang menjalankan fungsi yang sama, Anda dapat menggunakan

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

Jika Anda ingin menggunakan fungsi yang sama pada acara yang berbeda, blok kode berikut dapat digunakan

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

Saya belajar sesuatu yang sangat berguna dan mendasar dari sini .

fungsi rantai sangat berguna dalam hal ini yang berfungsi pada sebagian besar Fungsi jQuery termasuk juga pada keluaran fungsi.

Ini berfungsi karena output dari sebagian besar fungsi jQuery adalah set objek input sehingga Anda dapat segera menggunakannya dan membuatnya lebih pendek dan lebih cerdas

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

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

Dan Anda dapat menggabungkan acara / fungsi yang sama dengan cara ini:

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

Coba dengan kode berikut:

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

  }
);