JSFiddle - React, Tailwind, and code Playground

JavaScript

/* Related to http://jqbug.com/7818 */

var foo = {foo: 'bar', poo: 1, doo: true};
var $foo = $(foo);

/* Fetch foo.foo, returns 'bar' */
console.log ('foo.foo =', $foo.data ('foo'));

/* Set a new key */
$foo.data ('baz', 'bazzy');

/* See that it's added the new key */
console.log ('object', foo);

/* Bind an event and remove it afterwards */
$foo.bind ('something', function () { console.log ('event triggered');
                                      
                                      /* Please uncomment to see event unbinding
                                      
                                      $foo.unbind ('something');
                                      
                                      //*/
                                     
                                     });

/* See that __events__ is attached */
console.log ('object.__events__', foo);

/* Trigger and immediately remove the event */
$foo.trigger ('something');

/* __events__ is gone */
console.log ('no object.__events__', foo);

/* Doesn't work */
$foo.trigger ('something');

/* Animate a property */
$foo.animate ({poo: '+=200'}, 100, function () { console.log ('object.poo = 201', foo); });

/* Serialize the object $foo.serialize () doesn't work */
console.log ('serialized string', $.param (foo));

/* Removes foo.doo */
$foo.removeData ('doo');
console.log ('no foo.doo', foo);

/* Objects are the same, doesn't use a cache to store stuff, just does it directly on the element */
console.log ('uses original object to store data', $foo[0] === foo);