Versionen dieses Beitrags

data-attribute nach Browserupdate nicht mehr definiert

Thepoeppel crop Rolf B
  • data-attribute nach Browserupdate nicht mehr definiert
  • Hallo Pit,
  • zunächst mal ist es so, dass .attr("data-xyz") nicht der ideale Weg ist, um auf den Wert von data-Attributen zuzugreifen.
  • Wenn Du nur mit jQuery hantierst, kannst Du die .data Methode verwenden, also z.B. `let xyz = $("#...").data("xyz");`. Damit kannst Du auch etwas ändern: `$("#...").data("xyz", 4711);` speichert 4711 für xyz, **aber nicht im data-Attribut**, sondern jQuery-intern. Auslesen mit .data("xyz") liefert den neuen Wert, Auslesen mit .attr("data-xyz") liefert den alten Wert. Das kann gelegentlich nützlich sein.
  • Eine Alternative ist das dataset Attribut im DOM. `$("#...")[0]`, oder `document.getElementById("...")` liefert Dir das HTML Element aus dem DOM. In einem click-Handler musst Du dagegen aufpassen. Wenn Du den Eventhandler direkt auf dem Button registrierst hast, enthält `this` das DOM Element des Buttons. Hat das Event gebubbelt, enthält `this` das DOM Element des Containerelements, auf dem der click-Handler registriert wurde.
  • Eine Alternative ist das dataset Attribut im DOM. Wenn Du das DOM Element zum Button hast, kannst Du mit `btn.dataset.xyz` auf den Wert von data-xyz zugreifen und den Attributinhalt durch Zuweisung auch ändern.
  • Wie kommst Du an das DOM Element heran: `$("#...")[0]`, oder `document.getElementById("...")` liefert es Dir. Mit dem `this` in einem click-Handler musst Du dagegen aufpassen. `this` enthält das DOM Element, auf dem der click-Handler registriert wurde. Wenn das der Button ist, passt es. Hat das Event aber gebubbelt, enthält `this` das DOM Element des Containerelements, auf dem der click-Handler registriert wurde.
  • Es ist sicherer, statt this das Event-Objekt zu verwenden, das dem click-Handler mitgegeben wird, und darin das target-Attribut zu verwenden. Das funktioniert gut, solange im Button nur Text steht.
  • FALLS der Button HTML enthält, verhalten sich Chrome und Firefox unterschiedlich. Der eine liefert dann den Button, der andere das Kind-Element. D.h. du musst dann mit .closest('button') sicherstellen, dass Du wirklich auf dem Button landest.
  • Folgendes HTML-Snippet ist valide:
  • ~~~html
  • <div id="outer">
  • <button id="btnFoo">
  • <span id="inner">Don't</span> Click Me
  • </button>
  • </div>
  • ~~~
  • Darauf registrieren wir nun Event Handler:
  • ~~~js
  • $("outer").click(function(e) {
  • console.log(this);
  • console.log(e.target);
  • });
  • $("btnFoo").click(function(e) {
  • console.log(this);
  • console.log(e.target);
  • });
  • ~~~
  • 1\. Man klickt auf "Click me"
  • Der btnFoo-Handler loggt den Button für this und für e.target.
  • Der outer-Handler loggt das div für this und den button für e.target
  • 2\. Man klickt auf "Don't"
  • Ich habe gerade keinen Firefox parat, aber soweit ich weiß, ergibt sich kein Unterschied.
  • In Chrome ist es aber so, dass ein Klick auf "Don't" den span für e.target loggt. D.h. man sollte es unterlassen, in Buttons HTML-Innereien zu bauen, oder man muss mit `$(e.target).closest("button")` ein jQuery-Set mit dem Button beschaffen. In allen Browsern außer Internet Explorer gibt es diese Methode auch nativ im DOM: `e.target.closest("button")` liefert das DOM Element zum Button.
  • In Chrome ist es aber so, dass ein Klick auf "Don't" den span für e.target loggt. D.h. man sollte es unterlassen, in Buttons HTML-Innereien einzubauen, oder man muss mit `$(e.target).closest("button")` ein jQuery-Set mit dem Button beschaffen. In allen Browsern außer Internet Explorer gibt es diese Methode auch nativ im DOM: `e.target.closest("button")` liefert das DOM Element zum Button.
  • _Rolf_
  • --
  • sumpsi - posui - clusi