jQuery.data and dynamically changing HTML5 custom attributes

Question

The problem:

jQuery objects html5 custom attributes DATA is being cached.
In my application I have a form with a field that has a changing custom data attribute, and this specific behavior is imperative for the functionally of the form.

What we have here:

There is an input field with some default custom attribute:

<input type="text" name="xxx" data-test="4">

Get the custom attribute

for $('input').data() the result would be { test="4" }

change custom attribute

$('input').attr('data-test','5')

Get the custom attribute - again

for $('input').data() the result would STILL be { test="4" }

Question

How can I always make sure to get all the REAL custom attributes, there can be more than one on an element, using the $.data() function? I have tried the $.removeData() before each fetch, but it cleans all the data completely from the element so it isn't accessible any longer.

Answer 1

You need to do this: $('input').data( 'test' , 5 )

If you call .attr( 'test' , 5 ) you will be setting an attribute, and you are affecting it like this <input type='text' data-test='4' test='5' />

As a note, you can get specific data attributes like this: var test = $('input').data('test');

For removing a specific data attribute, you can do this: jQuery.removeData( $( 'input' ) , "test" );