jQuery - data-Methode funktioniert nicht richtig

[holzmensch]

Hallo,

ich versuche auf die data-Attribute mit der data() jQuery Methode zuzugreifen, doch funktioniert nur bedingt. Wenn der Wert im Laufe des Scripts verändert wird, dann stimmt die Wiedergabe nicht mehr, alsob das irgendwie gecached wird oder sowas. Hier mein Beispielcode:

<input type="button" value="x" data-mensch="affe" id="abc">
<script>
    $(function(){
        $('#abc').click(function(){
            console.log(
                $(this).attr('data-mensch')
                    + " " +
                    $(this).data('mensch')
            );
            $(this).attr('data-mensch','hund');
            console.log(
                $(this).attr('data-mensch')
                    + " " +
                    $(this).data('mensch')
            );
        });

    });
</script>

Da ich immer wieder mit $(this) auf das Element zugreifen wird ja eig immer ein neues Objekt erstellt und die Werte neu initialisiert. Die Wiedergabe ist folgende:

affe affe
hund affe

Habe ich die Funktion irgendwie falsch verstanden oder mache ich etwas falsch?
Vielen Dank

 

[abuzze]

Da ich immer wieder mit $(this) auf das Element zugreifen wird ja eig immer ein neues Objekt erstellt und die Werte neu initialisiert.

[...]

Habe ich die Funktion irgendwie falsch verstanden oder mache ich etwas falsch?

Da wird kein neues Objekt erstellt, es ist immer dasselbe jquery-object, das da intern gespeichert wird, es handelt sich ja immer um dasselbe Element.

Das erklärt dann auch das "caching":

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Soll heissen: sobald du einmal data() auf ein jQuery-object angewandt hast, werden nur noch die intern gespeicherten Werte verwandt, die data-xxx -Attribute werden nicht mehr betrachtet, Änderungen daran haben somit keine Auswirkung mehr bei der Verwendung der $.data-Methoden.