2

I've got some variables that I need to pass in jQuery/HTML for further use. I've got randomly generated number that I need to use later so I'm saving it as data-spin on parent element.

When I'm trying to access the data, it stays the same - it's set once and even when the value is changed, the variable still says the first value.

$('#parent').scroll(function() {
    var number = 1 + Math.floor(Math.random() * (12));
    $('#parent').attr('data-spin', number);

    console.log($('#parent').data('spin'));
});

I tried attaching the function to .scroll function or no function at all but the result is same.

I'm attaching the jsfiddle example. The random number is logged at the first line, stored data at second.

Any ideas why it's not taking the current value of the field?

The variable is used in different function so I can't use the number variable.

https://jsfiddle.net/orou3kLy/

Angie
  • 511
  • 5
  • 17
  • Possible duplicate of [JQuery .data() not working?](https://stackoverflow.com/questions/25876274/jquery-data-not-working) – Olga Sep 19 '17 at 09:44

4 Answers4

3

They are not stored the same way.

Try storing using the same way you get the data:

$('#parent').scroll(function() {
    var number = 1 + Math.floor(Math.random() * (12));
    $('#parent').data('spin', number);

    console.log($('#parent').data('spin'));
});
Adelin
  • 7,809
  • 5
  • 37
  • 65
3

tl;dr: .data and .attr are different approaches to store data. .attr stores your data directly as an attribute. I guess for your approach, you should save your number with .data as it keeps the data type as well.

Also, for better performance, store the jQuery selector in a variable, because querying each scroll cycle takes time.

And one last thing: number often is used as a type description in JavaScript (or better in some JS extensions like TypeScript and Flow). So it would be better to rename your variable there.

Here a working example:

const $parent = $( '#parent' );
$parent.scroll(function() {
    var num = 1 + Math.floor(Math.random() * (12));
    $parent.data('spin', num);

    console.log($parent.data('spin'));
});
#parent {
  background: lightgreen;
  max-width: 300px;
  max-height: 300px;
  overflow: auto;
}

.content {
  min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div class="content">---</div>
</div>
lumio
  • 7,428
  • 4
  • 40
  • 56
2

It's because you are reading data incorrectly. You're using:

$('.kid').html('<strong>number:</strong> ' + number + '<br><strong>data:</strong> ' + $('#parent').data('spin'));

But instead of $('#parent').data('spin') you need to use $('#parent').attr('data-spin'). Here is the working fiddle: https://jsfiddle.net/orou3kLy/2/

P.S.
  • 15,970
  • 14
  • 62
  • 86
2

You could read attribute value the same way you write it:

$('#parent').attr('data-spin');

You have to be carefull though, because all values in attributes are strings. As to data peculiar behaviour I suggest having a close look a the JQuery documentation, using data is not very intuitive.

Olga
  • 1,648
  • 1
  • 22
  • 31
  • You could also read the anwser in this question for some explanation on data https://stackoverflow.com/questions/25876274/jquery-data-not-working – Olga Sep 19 '17 at 09:42