Updating HTML data attribute correctly but changes not being displayed on page

Question

I have this HTML:

<input type="text" id="query" data-source="whatever">

I have some jQuery that changes the data attribute successfully i.e. "whatever" changes to "test"

$(function() {
    $('#query').data('source', 'test');
    console.log($('#query').data());
});

but if I inspect the page using Chrome, the data attribute has not been updated in the element.. I can print it in console, but I can't inspect the new value! Very confusion. Any ideas?

here is the fiddle

Answer 1

The data isn't stored on the element (use attr or prop for that). Instead jQuery maintains it in $.cache.