jQuery, data() not updating data attribute [duplicate]

Answer 1

Per jQuery API Docs

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

The .data() method will not modify the existing DOM node, but will only be retrievable via calling of $selector.data(). Your DOM elements don't change, just the data attached to them.

Answer 2

You can do something like this:

$("#usernameStatus").attr('data-valid','1'); 

Instead of ising .html() which returns inner content of an element .

Answer 3

The .data() method does not modify the DOM element's attribute. However, data is still saved via. $selector.data( key, value ); and can be retrieved via. $selector.data( key );

In order to add an attribute to a DOM element, you will likely want to use the .attr() method. With .attr(), an attribute can be attached to an element via. $selector.attr( key, value ); and can be retrieved via. $selector.attr( key );

    validUsername(data) {       
        if (data === 'true') {
            $("#usernameStatus").html("y").attr("data-valid", 1);
        } else {
            $("#usernameStatus").html("x").attr("data-valid", 0);
        }
    }

JSFiddle example

One of the advantages of using .attr() instead of .data() is the ability to find all elements with an attribute (and value) via. the $('[key="value"]') selector.