JSFiddle - React, Tailwind, and code Playground
by pomeh
HTML
<div id="test-case" data-state="my-state-value"></div>JavaScript
// test case for jQuery.data bug
// see jQuery bug tracker "$.data don't behave the same as $.fn.data about data-* attributes" entry at http://bugs.jquery.com/ticket/7837
// declaration of the element to test
var element = jQuery('#test-case');
// -----------------------------------------
// First we try to call $.data on element[0]
// -----------------------------------------
console.log('Using jQuery.data function');
console.log(jQuery.data(element[0])); // FAILS: empty object
// Chrome's console show an object with the "state" property. In fact there is no such property, it only appears because of the rest of the code. If you delete all the lines above, you'll see that this line is not the same.
// $.fn.data and $.data refers to the same object internally, $.data has a bug and return an empty object, $.fn.data hasn't this bug so it updates the shared object, then Chrome's console display the shared object, that has been modified after this line's method call
// try to remove all lines after here, or delay the execution with setTimeout, you'll see that the objet has no "state" property
// Just try other ways to retrieve the value, both fails
console.log(jQuery.data(element[0], 'state'));
console.log(jQuery.data(element[0]).state);
console.log('-----');
// -------------------------------------
// Here we use the $.fn.data, it works !
// -------------------------------------
console.log('Using jQuery.fn.data function');
console.log(element.data()); // PASS: object with active property
console.log(element.data().state); // PASS: "my-state-value"
console.log(element.data('state')); // PASS: "my-state-value"
console.log('-----');
// ---------------------------------------
// Then we try again with $.data method...
// ... and now it works too !
// ---------------------------------------
console.log('Using jQuery.data function again');
console.log(jQuery.data(element[0])); // PASS: object with active property
// Just try other ways to retrieve...