javascript - How to access HTML element attribute in jQuery JSON -

i trying access specific html element attribute , assign json property.

at first json object file , load settings. go through rows , create text inputs various attributes.

since using iris plugin, firing right after. can see using changeelements function, iris-id being used (which works).

so question is... why color property in iris part empty?

function startcorr(jsonfile) {     request = new xmlhttprequest();     request.open('get', jsonfile, true);     request.onload = function() {         if (request.status >= 200 && request.status < 400) {             settings = json.parse(request.responsetext);             $.each(settings, function(key, jsonrow) {                 $(sidepanel).append(createinput(key, jsonrow));             });             // iris             $('.iris').iris({                 color: $(this).attr("iris-color"), // doesn't work                 width: 200,                 border: false,                 hide: false,                 change: function(event, ui) {                     changeelements($(this).attr("iris-id"), ui);                 }             });         } else {             console.log("error getting json file");         }     };     request.send(); }  function createinput(key, jsonrow) {     input  = "<label>" + jsonrow.name + "<input type='text' class='iris' id='" + jsonrow.section + "' ";     input += "iris-color='" + getcolor(jsonrow.selectors[0]) + "' iris-id='" + key + "'>";     input += "</label>"      return input; }  function getcolor(selectorobject) {     return $(selectorobject.selector).css(selectorobject.style); } 

json

[   {     "name": "global text",     "section": "text-global",     "input": "color",     "selectors": [       {         "selector": ".button.special",         "style": "background-color"       },       {         "selector": ".button.notsospecial",         "style": "color"       }     ],     "areas": ["homepage", "detail", "category", "basket"]   },   {     "name": "text on hover",     "section": "text-hover",     "input": "color",     "selectors": [       {         "selector": "#banner p",         "style": "color"       }     ],     "areas": ["homepage", "detail", "category", "basket"]   } ] 

when need access data specific element pass options of plugin 1 common approach initialize plugin within $.each loop. within loop this current element

$('.iris').each(function() {   var $el = $(this);   $el.iris({     color: $el.attr("iris-color"),      width: 200,     border: false,     hide: false,     change: function(event, ui) {       changeelements($el.attr("iris-id"), ui);     }   }); });