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 */ }
 });

ขอบคุณล่วงหน้า!

นั่นเป็นรอบวิธีอื่น ๆ คุณควรเขียน:

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

นอกจากนี้หากคุณมีตัวจัดการเหตุการณ์หลายตัวที่เชื่อมต่อกับตัวเลือกเดียวกันที่เรียกใช้ฟังก์ชันเดียวกันคุณสามารถใช้

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

หากคุณต้องการใช้ฟังก์ชันเดียวกันในเหตุการณ์ที่แตกต่างกันสามารถใช้บล็อกโค้ดต่อไปนี้ได้

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

ผมได้เรียนรู้สิ่งที่มีประโยชน์จริงๆและพื้นฐานจากที่นี่

ผูกมัดฟังก์ชั่นที่มีประโยชน์มากในกรณีนี้ซึ่งทำงานในส่วนฟังก์ชั่น jQuery รวมทั้งในการส่งออกฟังก์ชั่นมากเกินไป

ทำงานได้เนื่องจากเอาต์พุตของฟังก์ชัน jQuery ส่วนใหญ่เป็นชุดวัตถุอินพุตเพื่อให้คุณสามารถใช้งานได้ทันทีและทำให้สั้นลงและชาญฉลาดขึ้น

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

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

และคุณสามารถรวมเหตุการณ์ / ฟังก์ชันเดียวกันด้วยวิธีนี้:

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

ลองใช้รหัสต่อไปนี้:

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

  }
);