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();
});