Kann Attribut Anfangsdaten (Daten- *) gelesen, aber nicht Attributdaten aktualisiert lesen kann

Question

Eine Seite Zur Zeit arbeite ich an erzeugt ein div mit einem anfänglichen Satz von Werten, wie JSON in einem data-* Attribut gespeichert:

die JSON ist:

{"name":"Qm9i","gen":"1","level":"4","topic":"","checked":"eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9","pronoun":"2"} 

im Element wie folgt aus:

<div id="comment-1" class="container-element" data-all="{&quot;name&quot;:&quot;Qm9i&quot;,&quot;gen&quot;:&quot;1&quot;,&quot;level&quot;:&quot;4&quot;,&quot;topic&quot;:&quot;&quot;,&quot;checked&quot;:&quot;eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9&quot;,&quot;pronoun&quot;:&quot;2&quot;}"> 

Es gibt eine Reihe dieser divs, mit einzigartigen IDs, und der Benutzer kann eine abschließende Bearbeitung auf Inhalte innerhalb des div machen (und die Änderungen werden im Datenattribut widergespiegelt) vor der endgültigen Ausgabe.

Wenn der Benutzer klickt auf EDIT, wird die folgende Funktion aufgerufen:

// Get the id of the current comment block 
var index = getIndex($(this).attr('id')); 
var commentFrame = $('#comment-' + index); 


var fr = commentFrame.attr('id'); 
console.log("Edit button for " + fr + " was clicked..."); 

var b64 = commentFrame.data('all').checked; 
var lvl = commentFrame.data('all').level; 

console.log("Retrieved from the bottom of the container...") 
console.log("level: " + lvl + " , checked: " + b64 + " or " + atob(b64)); 

//rest of code here 

(Entschuldigung für die Fülle von Log-Anweisungen - Ich habe das Debuggen für eine ganze Weile jetzt ben versuchen)

wenn die EDIT-Taste wird zuerst angeklickt wird, erscheint der Code korrekt auszuführen und die Daten abgerufen werden, wie in der Konsolenprotokoll belegt ...

Edit button for comment-1 was clicked... 
Retrieved from the bottom of the container... 
level: 4 , checked: eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9 or {"1":"4","7":"4","8":"4","9":"4"} 

... Änderungen an den Inhalten der div wird, hat in einer anderen Funktion

var details = JSON.parse(parent.attr('data-all'));  
details.checked = fdata.checked; //new value for 'checked'    
details.level = avg.toFixed(2);  //new value for 'level' 

// update everything...     
parent.attr('data-all', JSON.stringify(details)); 

... und dies wird sofort in dem Datenattribut für das div (‚Niveau‘ und ‚geprüft‘ mit den neuen Werten aktualisiert reflektiert gemacht, und das Datenattribut beide geändert.

<div id="comment-1" class="container-element" data-all="{&quot;name&quot;:&quot;Qm9i&quot;,&quot;gen&quot;:&quot;1&quot;,&quot;level&quot;:&quot;3.25&quot;,&quot;topic&quot;:&quot;&quot;,&quot;checked&quot;:&quot;eyIxIjoiMSIsIjciOiIzIiwiOCI6IjQiLCI5IjoiNSJ9&quot;,&quot;pronoun&quot;:&quot;2&quot;}"> 

jedoch ...

Das Problem entsteht, wenn Sie bearbeiten auf einer zuvor bearbeiteten div (zum Beispiel, wenn der Benutzer seinen Kopf ein zweites Mal ändert) klicken.

Wie zu erwarten, wird genau derselbe Codeblock oben aufgerufen, aber anstatt die aktualisierten Werte 'level' und 'checked' vom Datenattribut zurückzugeben, gibt er stattdessen die initialen Werte für beide 'level zurück 'und' checked ', die bei der früheren Bearbeitung im Tag überschrieben wurden und nicht mehr erreichbar sein sollten.

Edit button for comment-1 was clicked... 
Retrieved from the bottom of the container... 
level: 4 , checked: eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9 or {"1":"4","7":"4","8":"4","9":"4"} 

Ich habe mein Gehirn Abstich und eine Zeit lang bei dieser starren jetzt und immer nirgends, so ich habe gehofft, dass die gut Leute hier könnten in der Lage sein, einen Vorschlag zu bieten, wo könnte ich falsch gehen werden .

Answer 1

data ist nicht ein Accessor für data-* Attribute. Es greift auf den Datencache von jQuery zu und verwaltet ihn für ein Element, das von -Attribute initialisiert und ansonsten vollständig von ihnen getrennt ist. Dies ist ein Punkt der Verwirrung für eine große Anzahl von Menschen. Wenn Sie das tatsächliche Attribut verwenden möchten, verwenden Sie attr("data-all") konsistent in Ihrem Code.

Wenn Sie den Datencache von jQuery für das Element verwenden möchten, verwenden Sie data("all") konsistent in Ihrem Code.

Wenn Sie attr("data-all") und data("all") in Ihrem Code mischen, erhalten Sie inkonsistente Ergebnisse.

einfacheres Beispiel:

var d = $("#foo"); 
 
console.log("d.attr('data-all'): " + d.attr("data-all")); 
 
console.log("d.data('all'): " + d.data("all")); 
 
console.log("Updating the data cache doesn't update the attribute:"); 
 
d.data("all", "data updated"); 
 
console.log("d.attr('data-all'): " + d.attr("data-all")); 
 
console.log("d.data('all'): " + d.data("all")); 
 
console.log("Updating the attribute doesn't update the data cache:"); 
 
d.attr("data-all", "attr updated"); 
 
console.log("d.attr('data-all'): " + d.attr("data-all")); 
 
console.log("d.data('all'): " + d.data("all"));

<div id="foo" data-all="initial"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>