Question

I am trying to access an html element’s prototype through jQuery’s .data() function. So far I am very confused.

This is my code:

// start prototype definition for myWidget
var myWidget = function() { 
    console.log('my widget is alive.');
    return this; 
};

myWidget.prototype.chosenSelect = [];

myWidget.prototype.init = function() {
    this.chosenSelect = $('#chooseMe');

    // test 1
    console.log(this.chosenSelect.data());

    // test 2
    console.log(this.chosenSelect.data('chosen'));

    // test3
    console.log(this.chosenSelect.data('Chosen'));

    // test4
    var chosenObject = this.chosenSelect.data();
    console.log(chosenObject.chosen);
};

Test 1 from above returns an object that I was able to look through using Chrome devtools. The object looks like this:

Object
    chosen: Chosen
        changeCallbacks: Array[0]
        etc
        etc
        etc

I want to access the chosen object in that data object. but tests 2 through 4 all return undefined. What could I be doing wrong?

Edit

The prototype is being added to the element from another library. This is an excerpt where the assignment occurs:

Chosen.prototype.init = function(select, zidx, isIE7) {
this.select = select;
this.select.data('chosen', this);

Answer 1

You can access the data object as follows. Here’s a working example.

// Set some data on the widget.
jQuery.data($('#chooseMe')[0], "Chosen", {chosen: "Hello!"});

var myWidget = function() {
    console.log('my widget is alive.');
    return this;
};

myWidget.prototype.chosenSelect = [];

myWidget.prototype.init = function() {
    this.chosenSelect = $('#chooseMe')[0];

    // test 1
    console.log(jQuery.data(this.chosenSelect));

    // test 2
    console.log(jQuery.data(this.chosenSelect, "Chosen"));

    // test3
    console.log(jQuery.data(this.chosenSelect, "Chosen").chosen);

    // test4
    var chosenObject = jQuery.data(this.chosenSelect, "Chosen");
    console.log(chosenObject.chosen);
};


myWidget.prototype.init();