To be clear,
attr() method replaces the DOM property with the given value and are restricted to only string types.data() method is used to store arbitrary info of any valid datatype, related to the elements. They cannot be accessed via DOM manipulation.
How attr() works ? Official Documentation
Setting values: Its sets the values of the attributes of a HTML element DOM. The changes will be reflected immediately and can be seen in the console (Inspect Element)
(1) $(element).attr(key,value) - The attribute-value pair to be set on the element.
(2) $(element).attr(obj) - An object of attribute-value pairs to be updated to an element.
(3) $(element).attr(key,<callback_function>) - The value to be updated to an attribute of an element is returned from the callback function.
Reading values: $(element).attr(key)
It returns the attribute value in the DOM. Its recommended to use attr() for only attributes and prop() for the properties.
Version dependency (both setting and reading): Prior to version 1.6, properties can also be added via attr() method. From version 1.6, jQuery provides prop() method to update the properties of an element. Like checked, disabled, selected etc...
How data() works ? Official Documentation
Storing values: $(element).data(key,value)
It stores the info in the cache ($.cache) mapped to a unique jQuery id for each element. The unique id starts from 0 and gets incremented for every new element. These properties will not be updated in the DOM. So using vanilla Javascript HTMLElement.dataset[key] or HTMLElement.getAttribute("data-*") will return nothing.
For data- attributes, the keys are camelCased before storing in the cache.
Version dependency: Prior to jQuery 1.4.4, the method completely replaces the data object instead of extending it with the elements attributes.
Reading values: (1) $(element).data(), (2) $(element).data(key)
(1) Returns all the data assigned to the element.
Version dependency: As said already, prior to version 1.4.4, the method returns the values only set by $(element).data(key,value), no data- attributes in the HTML will be returned. So it is recommended to use the latest version.
(2) Returns the value assigned to the key on the element. If the key is present in the cache, it is returned else the concerned data- attribute is returned.
<div id="data" data-progress-bar="20"></div>
$("#data").data("progress-bar",100);
console.log($("#data").data("progress-bar")); //consoles 100
$(document).ready(function(){
console.log($("#data").data("progress-bar"));
console.log($("#data").data("progressBar"));
console.log($("#data").data()["progress-bar"]);
console.log($("#data").data()["progressBar"]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" data-progress-bar="20"></div>
In the above snippet,
$(element).data("progress-bar") - returns 20 - gets the data from the data- attributes.
$(element).data("progressBar") - returns 20 - converts the camelCased string to hyphenated and gets the data from the data- attributes.
$(element).data()["progress-bar"] - gets the data object from cache and but returns undefined, as the key will not be present. The difference between this and the second approach is, the second approach converts the hyphenated string to camelCased internally.
$(element).data()["progressBar"] - gets the data object from cache and returns the value for the key.
So finally,
USING attr():
$(document).ready(function(){
console.log("Before setting : "+$("#data").attr("data-progress"));
$("#data").attr("data-progress",100);
console.log("After setting : "+$("#data").attr("data-progress"));
console.log("After setting (acessing via JavaScript) : "+document.querySelector("#data").getAttribute("data-progress"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" data-progress="20"></div>
USING data():
$(document).ready(function(){
console.log('Before setting : $("#data").data("data-progress") : '+$("#data").data("data-progress"));
console.log('Before setting : $("#data").data("progress") : '+$("#data").data("progress"));
$("#data").data("data-progress",100);
console.log('After setting : $("#data").data("data-progress") : '+$("#data").data("data-progress"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="data" data-progress="20"></div>
$("#changeme").attr({'data-progress','100'});just add attr({}) then your code.