javascript - JQuery .on() metode med flere hendelsesbehandlere på en selektor

Forsøker å finne ut hvordan man bruker Jquery .on() metoden med en spesifikk velger som har flere hendelser tilknyttet seg. Jeg brukte tidligere .live() metoden, men er ikke helt sikker på hvordan man oppnår det samme med .on(). Vennligst se koden min nedenfor:

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

Jeg vet at jeg kan tilordne de flere hendelsene ved å kalle:

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

Men jeg tror korrekt bruk av .on() ville være slik:

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

Finnes det en måte å få dette til? Eller hva er beste praksis her? Jeg prøvde koden nedenfor, men det funket ikke.

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

Svar #1

Det er motsatt. Du bør skrive:

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

Svar #2

Også, hvis du hadde flere hendelseshåndterere knyttet til den samme selector som utfører den samme funksjonen, kunne du bruke

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

Svar #3

Hvis du vil bruke den samme funksjonen på forskjellige hendelser, kan følgende kodeblokk brukes

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

Svar #4

Jeg lærte noe virkelig nyttig og grunnleggende herfra.

kjedning av funksjoner er veldig nyttig i dette tilfellet, og fungerer på de fleste jQuery-funksjoner, inkludert on-funksjonens output også.

Det fungerer fordi utdataene fra de fleste jQuery-funksjoner er inputobjektsamlingene, så du kan bruke dem med en gang og gjøre det kortere og smartere

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

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

Relaterte artikler