title: Detecting when data attribute changes
body: <p>I'm currently working on a microsite where I'd like to swap out content depending upon if a change to the parent containers data attribute occurs.</p>
  
  <pre><code>&lt;div id="app" data-page="1"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Next I have a button that gets the data attribute and then increments on click. </p>
  
  <pre><code>var page = +$('#app').attr('data-page');
  $('#button__page-change').on('click', function() {
    page = page + 1;
    $('#app').attr('data-page', page);
  });
  </code></pre>
  
  <p>The next step now is to detect whenever that page is changed. I was thinking along the lines of a switch statement.</p>
  
  <pre><code>switch (page) {
    case 2:
      console.log('page: ', page);
    break;
    case 3:
      console.log('page: ', page);
    break;
    default: 
     console.log('switch statement does not appear to be working');
    break;
  }
  </code></pre>
  
  <p>The switch seems to not  be meeting any of the conditions and therefore going to the default case. But with that said, I was trying to perhaps put it inside a on change function. But I didn't seem to have any luck with that as nothing was logged to the console.</p>
  
  <p>Any input would be greatly appreciated. Thank you in advance.</p>