Troubles with dynamically adding and removing data attributes

Question

I'm building a parallax page that I'm running into an issue when resizing the browser. I'm controlling my animations with data attributes, which look like this:

<div class="element" data-0="transform:translateY(0px)" data-1283="transform:translateY(-1283 px)"></div>

This will do an animation that moves the element up the page by 1283px and take 1283px of scrolling to complete. I'm am adding the code with jquery like this:

$element.attr('data-0', 'transform:translateY(0px)').attr('data-' + windowHeight, 'transform:translateY(-' + windowHeight + ' px)');

The problem I'm having is that when the window is resized, my animation amount also needs to change. I'm running a function on window resize to look for and remove any data attributes:

$('.element').each( function() {
  var $element = $(this);
  $.each( $element.data(), function( key ) {
    $element.removeAttr( 'data-' + key );
  });
});

Then I'm calling my function that adds the data attributes. I also have a setTimeout function built so it only calls this function after the window is done being resized. This works great the first time I resize the window but anytime after that, jquery is not finding any elements with data attributes. Is there any reason why it would find them the first time but not anytime after that?

Answer 1

The reason it doesn't work is because you are adding data attributes incorrectly.

$element.attr('data-0', 'transform:translateY(0px)')

Instead, do the following.

$element.data('0', 'transform:translateY(0px)')

jQuery doesn't realize that you added a "data" attribute with your first method - it just knows you added "an" attribute. When jQuery first parses your DOM, it recognizes all data-* attributes as data and keeps reference to them, thus why your code works the first time around.