Event.observe not triggered in IE

Question

Event.observe(
    'size_list',
    'change',
    itemOptions["_hiddenSkuField"].getSkuOfProductBySize
);

the size_list is a drop-down list with some options. So, this should call a function that will generate me some HTML, but this doesn't happen. Needless to say, it works perfectly in Chrome and Firefox.

I can't see what the problem is, I don't enter the myFoo or even the upper .observe code, when I try to debug.

getSkuOfProductBySize: function() {
        document.getElementById('product-type').value = '';
        document.getElementById('sku_hidden').value = '';
        var selectedIndex = document.getElementById('dropdown_options').value;
        for (var i=0; i<itemOptions["_hiddenSkuField"].products.length; i++) {
            if (itemOptions["_hiddenSkuField"].products[i].size == selectedIndex) {
                document.getElementById('sku_hidden').value = itemOptions["_hiddenSkuField"].products[i].sku;
                itemOptions["_hiddenSkuField"].backupResponse = itemOptions["_hiddenSkuField"].products[i];
                itemOptions["_hiddenSkuField"].callShowHtmlOfButtons(itemOptions["_hiddenSkuField"].products[i]);
                return;
            }
        };
    }

itemOptions["_hiddenSkuField"] is the global object that I owns all the stuff. :D

UPDATE: I tried putting simple alert() around the function or the observer and it doesn't work. Also tried with click event - no success...

I do front-end development very rarely, but after my struggles with it today, I know why IE is hated so much.

Answer 1

It's a bit of an ugly solution, since you're using prototype.js, but still you can try with an alternative (if you don't find other solution) - binding an observe event with jQuery:

$('#dropdown_options').bind('change', function(){
        itemOptions["_hiddenSkuField"].getSkuOfProductBySize();
});

Answer 2

In Prototype, the above would be

$('size_list').observe('change', function(evt){
  itemOptions['_hiddenSkuField'].getSkuOfProductBySize();
});

I suspect also that there is a much simpler way to architect this page, such that the objects alone would have all the data they need, and you wouldn't need this "god object" hanging out in the DOM.