Ich habe das folgende Feld in einer MVC-Ansicht:
@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>
In einer separaten js-Datei möchte ich das data-helptext
Attribut auf einen Zeichenfolgenwert setzen. Hier ist mein Code:
alert($(targetField).data("helptext"));
$(targetField).data("helptext", "Testing 123");
Der alert()
Anruf funktioniert einwandfrei, er zeigt den Text "Alter Text" in einem Warndialog an. Der Aufruf zum Setzen des data-helptext
Attributs auf "Testing 123" funktioniert jedoch nicht. "Alter Text" ist immer noch der aktuelle Wert des Attributs.
Benutze ich den Aufruf von data () falsch? Ich habe dies im Internet nachgeschlagen und kann nicht sehen, was ich falsch mache.
Hier ist das HTML-Markup:
<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />
jquery
model-view-controller
attributes
custom-data-attribute
Jason Evans
quelle
quelle
data-
Attribut?Antworten:
Es wird in der
.data()
Dokumentation erwähntDies wurde auch behandelt unter Warum aktualisieren Änderungen an jQuery $ .fn.data () nicht die entsprechenden HTML 5-Daten- * -Attribute?
Die Demo zu meiner ursprünglichen Antwort unten scheint nicht mehr zu funktionieren.
Antwort aktualisiert
Wieder aus der
.data()
DokumentationAlso für
<div data-role="page"></div>
folgendes gilt$('div').data('role') === 'page'
Ich bin mir ziemlich sicher, dass das
$('div').data('data-role')
in der Vergangenheit funktioniert hat, aber das scheint nicht mehr der Fall zu sein. Ich habe eher ein besseres Schaufenster , welche Protokolle in HTML erstellt , als wenn die Konsole zu öffnen und ein weiteres Beispiel für den Multi-Bindestrich hinzugefügt camelcase Daten- Attribute Konvertierung.Aktualisierte Demo (25.07.2015)
Siehe auch jQuery Data vs Attr?
HTML
JavaScript (jQuery 1.6.2+)
Ältere Demo
Ursprüngliche Antwort
Für diesen HTML:
und dieses JavaScript (mit jQuery 1.6.2)
Siehe Demo
Wenn Sie die Chrome DevTools- Konsole zum Überprüfen des DOM verwenden, wird der in der Konsole angezeigte Wert
$('#foo').data('helptext', 'Testing 123');
nicht aktualisiert , jedoch.$('#foo').attr('data-helptext', 'Testing 123');
quelle
data('key', 'value')
Verfahren macht den Wert im Cache jQuery aktualisieren , aber aus Leistungsgründen (I DOM - Mutation erraten) das DOM selbst nicht aktualisiert wird..attr('key','value')
unabhängig davon tun, ob Sie es getan haben.data('key', 'value')
oder nicht, oder? Das scheint mir überflüssig zu sein, und ich habe Probleme, mir ein Szenario vorzustellen, in dem Sie in das zwischengespeicherte DOM schreiben möchten, aber nicht in das echte DOM. Vielleicht verstehe ich den jQuery-Cache nicht; Würde ein Besucher also alle Dinge sehen,.data()
die sich auf seinem Bildschirm ändern, oder nicht?Ich hatte ernsthafte Probleme mit
Das
data-property
Attribut wurde nicht festgelegt .Begonnen mit jQuery's
.attr()
:um den Wert einzustellen und
um den Wert abzurufen.
Jetzt funktioniert es einfach!
quelle
@ andybs akzeptierte Antwort hat einen kleinen Fehler. Weiter zu meinem Kommentar zu seinem Beitrag oben ...
Für diesen HTML:
Sie müssen auf das Attribut wie folgt zugreifen:
aber die Datenmethode wie folgt:
Der obige Fix für die .data () -Methode verhindert "undefiniert" und der Datenwert wird aktualisiert (während der HTML-Code dies nicht tut).
Der Sinn des Attributs "Daten" besteht darin, einen Wert mit dem Element zu binden (oder zu "verknüpfen"). Sehr ähnlich dem
onclick="alert('do_something')"
Attribut, das eine Aktion an das Element bindet ... der Text ist nutzlos. Sie möchten nur, dass die Aktion funktioniert, wenn sie auf das Element klicken.Sobald die Daten oder Aktionen an das Element gebunden sind, * muss der HTML-Code normalerweise nicht mehr aktualisiert werden, sondern nur die Daten oder Methoden, da dies von Ihrer Anwendung (JavaScript) verwendet wird. In Bezug auf die Leistung verstehe ich nicht, warum Sie sowieso auch den HTML-Code aktualisieren möchten. Niemand sieht das HTML-Attribut (außer in Firebug oder anderen Konsolen).
Eine Möglichkeit, wie Sie darüber nachdenken möchten: Der HTML-Code (zusammen mit den Attributen) ist nur Text. Die von JavaScript verwendeten Daten, Funktionen, Objekte usw. befinden sich auf einer separaten Ebene. Nur wenn JavaScript dazu aufgefordert wird, wird der HTML-Text gelesen oder aktualisiert, aber alle Daten und Funktionen, die Sie mit JavaScript erstellen, verhalten sich völlig getrennt von den HTML-Texten / -Attributen, die Sie in Ihrer Firebug-Konsole (oder einer anderen Konsole) sehen.
* Ich lege normalerweise Wert darauf , dass Sie den HTML-Code möglicherweise aktualisieren müssen, wenn Sie einen Fall haben, in dem Sie HTML beibehalten und exportieren müssen (z. B. eine Art Textformat- / datensensibler Texteditor), in dem der HTML-Code frisch auf eine andere Seite geladen wird auch.
quelle
data
Inattr('data-helptext'
macht den Unterschied, wo die akzeptierte Antwort und die mit vielen Stimmen nicht funktionieren. +1Ist mir auch passiert. Es stellt sich heraus, dass
gibt Ihnen ein nicht beschreibbares Objekt. Ich habe es gelöst mit:
Und von da an
data
war es ein standardmäßiges, beschreibbares JS-Objekt.quelle
$.extend...
du das getan hast , kannst du verwendendata
wie du willst:data.name = 'Nico'; data.questionSolved = true;
undconsole.log(data)
wirst diese neu hinzugefügten Eigenschaften anzeigenUm ein Zitat zu zitieren:
.data()
- jQuery-DokumentationBeachten Sie, dass diese (ehrlich gesagt ungerade ) Einschränkung nur der Verwendung von vorenthalten wird
.data()
.Die Lösung? Verwenden Sie
.attr
stattdessen.Natürlich fühlen sich einige von Ihnen möglicherweise unwohl, wenn sie die dedizierte Methode nicht anwenden. Stellen Sie sich das folgende Szenario vor:
Gesunder Menschenverstand - Warum sollten sie ein bereits etabliertes Attribut so ändern ? Man stelle sich vor
class
Beginn umbenannt Gruppe undid
zu Kennung . Das Internet würde kaputt gehen.Und selbst dann hat Javascript selbst die Möglichkeit, dies zu beheben - und natürlich könnte REGEX (und eine Vielzahl ähnlicher Methoden) trotz seiner berüchtigten Inkompatibilität mit HTML Ihre Attribute schnell in diesen neu-mythischen "Standard" umbenennen.
TL; DR
quelle
Wie bereits erwähnt,
.data()
legt die Methode weder den Wert desdata-
Attributs fest, noch liest sie aktualisierte Werte, wenn sich dasdata-
Attribut ändert.Meine Lösung bestand darin, jQuery mit einer
.realData()
Methode zu erweitern, die tatsächlich dem aktuellen Wert des Attributs entspricht:HINWEIS: Sicher könnte man einfach nutzen
.attr()
, aber aus meiner Erfahrung, die meisten Entwickler (aka me) machen den Fehler sehen.attr()
und.data()
als austauschbar, und oft ein , ohne zu denken für die andere ersetzen. Es mag die meiste Zeit funktionieren, aber es ist eine großartige Möglichkeit, Fehler einzuführen, insbesondere wenn es um irgendeine Art von dynamischer Datenbindung geht. Durch die Verwendung.realData()
kann ich das beabsichtigte Verhalten genauer beschreiben.quelle
Hatte das gleiche Problem. Da Sie weiterhin Daten mit der Methode .data () abrufen können, müssen Sie nur einen Weg finden, um in die Elemente zu schreiben. Dies ist die Hilfsmethode, die ich verwende. Wie die meisten Leute gesagt haben, müssen Sie .attr verwenden. Ich lasse es jedes _ durch ersetzen - wie ich weiß, macht es das. Mir sind keine anderen Zeichen bekannt, die es ersetzt ... aber das habe ich nicht untersucht.
EDIT: 01.05.2017
Ich habe festgestellt, dass es immer noch Fälle gibt, in denen Sie mit integrierten Methoden nicht die richtigen Daten abrufen konnten. Daher verwende ich jetzt Folgendes:
quelle