Phương thức JQuery .on () có nhiều trình xử lý sự kiện cho một bộ chọn

Cố gắng tìm ra cách sử dụng phương thức Jquery .on () với một bộ chọn cụ thể có nhiều sự kiện liên quan đến nó. Trước đây tôi đã sử dụng phương thức .live (), nhưng không hoàn toàn chắc chắn làm thế nào để thực hiện cùng một kỳ công với .on (). Xin vui lòng xem mã của tôi dưới đây:

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

Tôi biết tôi có thể chỉ định nhiều sự kiện bằng cách gọi:

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

Nhưng tôi tin rằng việc sử dụng .on () đúng cách sẽ như vậy:

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

Có cách nào để hoàn thành nó không? Hoặc thực hành tốt nhất ở đây là gì? Tôi đã thử mã dưới đây, nhưng không có xúc xắc.

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

Cảm ơn trước!

Đó là cách khác . Bạn nên viết:

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

Ngoài ra, nếu bạn có nhiều trình xử lý sự kiện được gắn vào cùng một bộ chọn thực thi cùng chức năng, bạn có thể sử dụng

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

Nếu bạn muốn sử dụng cùng chức năng cho các sự kiện khác nhau, khối mã sau có thể được sử dụng

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

Tôi đã học được một cái gì đó thực sự hữu ích và cơ bản từ đây .

Các hàm chuỗi rất hữu ích trong trường hợp này hoạt động trên hầu hết các Hàm jQuery kể cả trên đầu ra hàm.

Nó hoạt động vì đầu ra của hầu hết các hàm jQuery là các bộ đối tượng đầu vào để bạn có thể sử dụng chúng ngay lập tức và làm cho nó ngắn hơn và thông minh hơn

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

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

Và bạn có thể kết hợp các sự kiện / chức năng tương tự theo cách này:

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

Hãy thử với đoạn mã sau:

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

  }
);