jQuery dynamically update data keys & values

Question

I'm trying to make a function that gets all data-attributes dynamically from an element. For e.g.:

<button id="button" data-key1="title" data-key2="content">Button 1</button>
<button id="changeButtonData">Change data for button 1</button>

$(document).on('click', '#button', function(e){
    e.preventDefault();
    $buttonData = $(this).data();
    console.log($buttonData);
}

$(document).on('click', '#changeButtonData', function(e){
    e.preventDefault();
    //edit existing data-keys value
    $('#button').data('data-key1', 'newtitle');
    //store new data-key on element
    $('#button').data('data-key3', 'new');
}

The problem is, if i click the first button and check the console log, it will show data-key1="title" and data-key2="content"

And if i click the 2nd button afterwards, and click the first button again to fire the console logging again, it won't display the new replaced data-attributes or the new data-tags.

Anyone got an idea how to solve this?

Rory McCrossan · Accepted Answer · 2015-03-17 11:06:22Z

1

The issue is because when you set the data attribute you should omit the data- prefix, eg: $('#button').data('key3', 'new');. Try this:

$(document).on('click', '#changeButtonData', function (e) {
    e.preventDefault();
    $('#button').data({
        'key1': 'newtitle',
        'key3': 'new'
    });
});

Example fiddle

answered Mar 17, 2015 at 11:06

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

somethinghere Over a year ago

Your fiddle doesn't work (I'm on Safari 8) - I was testing this out and had the same idea but I can't seem to get it working.

Rory McCrossan Over a year ago

I just tried it on Safari 8.0.3 for OSX and it worked fine. What makes you say that it did not work? Don't forget that the attributes themselves will not be changed in the DOM - jQuery stores them in an internal cache.

somethinghere Over a year ago

Aha thanks that helps :) I couldnt find that info the docs immediately. Annoying, though.

Rory McCrossan Over a year ago

Yeah, I just edited my previous comment. jQuery does indeed store data attributes in an internal cache for performance benefits - you will see no change in the DOM, this is correct behaviour.

somethinghere Over a year ago

Okay thats the thing then.

Collectives™ on Stack Overflow

jQuery dynamically update data keys & values

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related