Question

Consider the following example:

HTML:

<div id="cool-div"></div>

JS/jQuery:

var ComplexObject = function() {

   this.Append = function(textToAppend) {
      //append text to the div that this is "attached" to
   };

};

var obj = new ComplexObject();
$("#cool-div").data("o", obj);

Is there a way for the ComplexObject() to know which DOM element it is “attached” to – in this case the DIV “#cool-div”. I would like to add text to “#cool-div” using just the ComplexObject() class … but I don’t think I can, or at least I haven’t been able to tackle it.

Answer 1

The object doesn’t know by default which element(s) it’s attached to – the data can be anything, so jquery wouldn’t know how to tell the object when it attaches it.

You can write a wapper around .data to make it comply with your requirement, for example:

$.fn.dataaware = function(key, value) {
    this.data(key, value);

    if (value instanceof ComplexObject)
        value.setContext(this);
}

You might also want to wrap .removeData as well.