Data option change isn't picked by jquery

Question

I've got div like this :

<div id="something-1" data-options='{"pause":"YES","delete":"NO", "kill":"NO"}'></div>

What I got going on is some ajax request and changes the data options like this :

$('#something-1' + item.id).attr("data-options", '{"pause":"YES","delete":"YES", "kill":"NO"}');

When I inspect with firebug I can see changed data options in html.

Then I have this "test" function which I trigger from firebug to see if the data has changed after the ajax update :

(function() {
        window.checkChanges = checkChanges;
        function checkChanges(id) {
        var dataOptions = $("#" + id).data('options');

        for(var index in dataOptions) {
            console.log(index,dataOptions[index]);
        };
        }
    })();

But for some reason data options are the same before and after ajax request. I would need to somehow incorporate live function into this? or something else, but I don't have idea what? any suggestions?

Edit

Ajax requests changes delete to YES

Answer 1

Is it possible you mixed up the ID of the selected div? In your fake ajax-request you add an item.id after "something" which is not present in your checking. Then it works just fine.

http://jsfiddle.net/EVyVT/

charlietfl noted that you can ommit the quotes around the object but I think it works with quotes, too.

Answer 2

Remove the quotes wrapping the object you are trying to set to the options so you are passing an object not a string to data

$(selector).attr("data-options", {"pause":"YES","delete":"YES", "kill":"NO"});

DEMO: http://jsfiddle.net/8A3LE/

Another way to change one value only

$(selector).data('options').delete='YES'