Benutzer-Werkzeuge
jquery:event
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
|
jquery:event [2020/07/24 11:07] webproducer angelegt |
jquery:event [2020/07/28 14:36] (aktuell) webproducer Erläuterung der Parameter der Methode "on" |
||
|---|---|---|---|
| Zeile 35: | Zeile 35: | ||
| mit nur einer Funktion für alle im div "language" befindlichen Schaltflächen einen Click-Handler zu erzeugen. | mit nur einer Funktion für alle im div "language" befindlichen Schaltflächen einen Click-Handler zu erzeugen. | ||
| Für später hinzugefügte (oder entfernte) Schaltflächen muss also der Javascript-Teil nicht mehr angepasst werden. Ein weiterer Vorteil ist, dass dynamisch nachgeladene Inhalte, z. B. durch ajax, ebenfalls berücksichtigt werden, da das Event nicht an den einzelnen Buttons, sondern an dem übergeordneten div zugeordnet wird. | Für später hinzugefügte (oder entfernte) Schaltflächen muss also der Javascript-Teil nicht mehr angepasst werden. Ein weiterer Vorteil ist, dass dynamisch nachgeladene Inhalte, z. B. durch ajax, ebenfalls berücksichtigt werden, da das Event nicht an den einzelnen Buttons, sondern an dem übergeordneten div zugeordnet wird. | ||
| + | |||
| + | Der Methode "on" werden die folgenden 3 Parameter mitgegeben: | ||
| + | |||
| + | * **events**: Ein oder mehrere Events, auf die reagiert werden soll (z. B. "click", "dbclick" oder "mouseover") | ||
| + | * **selector**: Der Selector, mit dem die Elemente identifiziert werden | ||
| + | * **anonyme Funktion**: Diese wird ausgeführt, wenn eines der oben festgelegten Events auf einen Selector ausgelöst wurde. Innerhalb dieser Funktion kann auf das Element mit "$ ( this )" zugegriffen werden. | ||
| Mit der Methode "off" können genauso einfach die mit "on" erzeugten click-Handler wieder entfernt werden. | Mit der Methode "off" können genauso einfach die mit "on" erzeugten click-Handler wieder entfernt werden. | ||
| Zeile 42: | Zeile 48: | ||
| zusätzlich den Schaltflächen eine CSS-Klasse "disabled" mitgeben, damit der Anwender weiß, dass hier kein Event ausgeführt wird. | zusätzlich den Schaltflächen eine CSS-Klasse "disabled" mitgeben, damit der Anwender weiß, dass hier kein Event ausgeführt wird. | ||
| + | **Beispiel:** | ||
| <code javascript> | <code javascript> | ||
| - | function initEventhandler() | + | function initEventhandler() |
| - | { | + | { |
| - | $( '#language' ).on( 'click', 'input[type=button]', function() { | + | $( '#language' ).on( 'click', 'input[type=button]', function() { |
| - | alert( $( this ).data( 'language' ) + " wurde ausgewählt" ); | + | alert( $( this ).data( 'language' ) + " wurde ausgewählt" ); |
| - | deleteEventhandler(); | + | deleteEventhandler(); |
| - | }) | + | }) |
| - | } | + | } |
| - | function deleteEventhandler() | + | function deleteEventhandler() |
| - | { | + | { |
| - | $( '#language' ).off( 'click', 'input[type=button]' ); | + | $( '#language' ).off( 'click', 'input[type=button]' ); |
| - | } | + | } |
| - | $( document ).ready( function() { | + | $( document ).ready( function() { |
| - | initEventhandler(); | + | initEventhandler(); |
| - | } ); | + | } ); |
| </code> | </code> | ||
jquery/event.1595581668.txt.gz · Zuletzt geändert: 2020/07/24 11:07 von webproducer
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
