Data-value updates in DOM, but not in function

Question

I alter the text of a button based on the selection by the user.

$(".someClass").click(function() {
    $("#someID_1").text($(this).prop("innerHTML"));
    $("#someID_1").attr("data-value", $(this).data("value"));

    someFunction("someID_1");
});

I then want to call a function someFunction.

function someFunction(someID) {
    console.log(parseInt($("#" + someID).data("value")))
    if ( parseInt($("#" + someID).data("value")) !== 10 ) {
        // do something
    } else {
        // do something else
    }
}

Whats happening is that console.log plots on the very first function call (thus, very first click) the data-value of the selection. However, when I select something new and the function gets executed again, the data-value plotted through the console.log stays the same. Looking at the DOM, the data-value gets updated though.

Why is that?

Take care of your `parseInt` you must specify your base : `parseInt($("#" + someID).data("value"), 10)` — Steeve Pitis, Oct 12 '16 at 11:06

Satpal · Accepted Answer · 2016-10-12T11:49:29.743

2

Since .data() uses internal cache it only uses uses the data attribute as the default value only and updating the attribute don't impact it,

You need to use .data(key, value) to set value. If you need to update DOM then use .attr()

$("#someID_1").data("value", $(this).data("value"));

If you use attr() to get and set, you will get the updated value. What you shouldn't use, is a mix of attr() and data(). And if you have no real reason to update the attribute, then use data() to get and set value.

edited Oct 12 '16 at 11:49

answered Oct 12 '16 at 11:02

Satpal

132,252
13
159
168

The `data-value` gets updated. I can see it in my `DOM` – four-eyes Oct 12 '16 at 11:03
and btw. http://stackoverflow.com/questions/22868080/jquery-data-value-not-updating – four-eyes Oct 12 '16 at 11:03
1

@Stophface, `.data()` uses attribute value only for default value, if you update attribute then its never used – Satpal Oct 12 '16 at 11:05
So if I want to update the `DOM` I need to use `attr()`. Because in the `DOM` I see that the `data-value` is updated. But, when I want to "really" (?) update the `data-value` I need to use `data.(key, value)`? – four-eyes Oct 12 '16 at 11:05
unfortunately that does not update the `data-value` neither. It remains in its "start-value" which would be "0". – four-eyes Oct 12 '16 at 11:20
2

@Stophface If you want to update the attribute, use in jQuery `attr()` to get and set. Now to add more confusion, to really update the data attribute and object, you should use: [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). To set: `$("#someID_1")[0].dataset.value = 666;` and to get: `$("#someID_1")[0].dataset.value` and forgive about jQuery `$.fn.data` which as you can see can be quite confusing. You can compare regarding quite unexpected result between [this jsFiddle](https://jsfiddle.net/wahbra4c/) and [this one](https://jsfiddle.net/wahbra4c/1/) – A. Wolff Oct 12 '16 at 11:26
@A.Wolff, I forgot about `dataset`, You should post that as an answer – Satpal Oct 12 '16 at 11:31
@Satpal In fact, i would suggest OP to use `attr()` if his goal is to update attribute, e.g, regarding some CSS rules. DOM node `dataset` would just add more confusion in any production code imho. – A. Wolff Oct 12 '16 at 11:35
@A.Wolff the problem with `attr()` is that I only receive the updated value *once*. When I update it again, it stays the same. – four-eyes Oct 12 '16 at 11:38
1

@Stophface `When I update it again, it stays the same` If you use `attr()` to get and set, no, you will get the updated value. What you **shouldn't** use, is a mix of `attr()` and `data()`. And if you have no real reason to update the attribute, then use `data()` to get and set value. What is preferred method really depends of your real use case – A. Wolff Oct 12 '16 at 11:39
1

@Stophface, That should not be the case, If you are setting using `$("#someID_1").attr("data-value", $(this).data("value"));` then use `$("#someID_1").attr("data-value");` to fetch it – Satpal Oct 12 '16 at 11:39
@A.Wolff Here we go. I mixed the two methods. Having three methods is rather confusing, however, I can imagine when you want to mix `data()` and `attr()`. Thanks for your help! – four-eyes Oct 12 '16 at 11:46
@Satpal you might want to include the comment from you in your answere – four-eyes Oct 12 '16 at 11:47

score -1 · Answer 2 · answered Oct 12 '16 at 11:04

-1

Try

$(document).on('click', ".someClass", function()
   {
       //your event logic
   }

answered Oct 12 '16 at 11:04

jacobdo

1,605
3
15
34

Data-value updates in DOM, but not in function

2 Answers2