JQuery .on () -Methode mit mehreren Ereignishandlern für einen Selektor

138

Es wird versucht herauszufinden, wie die Methode Jquery .on () mit einem bestimmten Selektor verwendet wird, dem mehrere Ereignisse zugeordnet sind. Ich habe zuvor die .live () -Methode verwendet, bin mir aber nicht ganz sicher, wie ich mit .on () das gleiche Kunststück vollbringen soll. Bitte beachten Sie meinen Code unten:

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

Ich weiß, dass ich die verschiedenen Ereignisse zuweisen kann, indem ich anrufe:

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

Aber ich glaube, die richtige Verwendung von .on () wäre wie folgt:

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

Gibt es eine Möglichkeit, dies zu erreichen? Oder was ist hier die beste Vorgehensweise? Ich habe den folgenden Code ausprobiert, aber keine Würfel.

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

Danke im Voraus!

— Butangphp
quelle

252

Das ist umgekehrt . Sie sollten schreiben:

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

— Frédéric Hamidi
quelle

1

Warum ist der Selektor nicht $("table.planning_grid td")?

— Muers

11

@Muers, es würde auch funktionieren und der Fragesteller erkennt dies an, ist aber auch der Meinung, dass er das Ereignis an <table>jedes einzelne <td>Element binden sollte , was in der Tat der richtige Weg ist.

— Frédéric Hamidi

37

Es gibt einen guten Grund, die .on-Datei in der <table> und nicht in der <td> zu verwenden, wenn Sie später <td> dynamisch hinzufügen. $ ('table td'). on ... wirkt sich nur auf das <td> aus, das sich in der Tabelle befindet, sobald Sie diese Funktion aufrufen. $ ('table'). on (..., 'td', function ...) wirkt sich auf alle <td> aus, die Sie später zu dieser Tabelle hinzufügen.

— Raanan

8

@Raanan, in der Tat, und außerdem hat jeder Event-Handler, den man registriert, Kosten, wenn auch winzig. Wenn Sie mit Tausenden von Zellen arbeiten, muss ein einzelner Handler <table>anstelle eines Handlers pro <td>Element registriert werden , um eine brauchbare Leistung zu erzielen.

— Frédéric Hamidi

1

Einverstanden. Es ist sehr schwierig, diese Frage zu googeln, da "Ein" ein so verbreitetes Wort ist und die meisten Ergebnisse mit .bindund zusammenhängen .live. Gute Antwort, genau das, wonach ich gesucht habe: D @ Frédéric - Ihr Link ist nicht mehr mit einem Header idauf der Seite jquery docs verknüpft. Wahrscheinlich ein Ergebnis der aktualisierten Dokumentation. Aber ich konnte diese Antwort auf dieser Seite nicht finden.

— Nzifnab

185

Wenn Sie mehrere Ereignishandler an denselben Selektor angehängt haben, der dieselbe Funktion ausführt, können Sie diese auch verwenden

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

— Pirijan
quelle

5

das ist, wonach ich gesucht habe

— RozzA

... und dann den tatsächlich ausgelösten Ereignistyp mit e.type abrufen (nach dem Hinzufügen des Ereignisses als Parameter, dh ... Funktion (e) ...

— William T. Mallard

24

Wenn Sie dieselbe Funktion für verschiedene Ereignisse verwenden möchten, kann der folgende Codeblock verwendet werden

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

— Thakurdev
quelle

11

Ich habe von hier etwas wirklich Nützliches und Grundlegendes gelernt .

Verkettungs Funktionen ist sehr nützlich in diesem Fall die auf den meisten jQuery - Funktionen einschließlich arbeitet auf zu Funktionsausgang.

Dies funktioniert, da die Ausgabe der meisten jQuery-Funktionen die Eingabeobjektsätze sind, sodass Sie sie sofort verwenden und kürzer und intelligenter gestalten können

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

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

— Iman
quelle

7

Und Sie können dieselben Ereignisse / Funktionen auf folgende Weise kombinieren:

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

— Angelmedia
quelle

1

Versuchen Sie es mit folgendem Code:

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

  }
);

— Yogesh
quelle