data-attribute nach Browserupdate nicht mehr definiert

[Rolf B]

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. 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:

<div id="outer">
   <button id="btnFoo">
      <span id="inner">Don't</span> Click Me
   </button>
</div>

Darauf registrieren wir nun Event Handler:

$("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 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