Broken jQuery in IE 8

Question

I have a method which detects the onChange event on a select box. When the user clicks on the select box, it should detect the click, get the id and load some content into a div below it by calling a php script.

This appears to function fine in FF but in IE nothing happens.

Code which detects change:-

$("#select").change(function() {
    var selectedId = $(this).val();
    recordIds = getSelectedRecords(selectedId);
    loadContent('records', recordIds);
});

The function getSelectedRecords simply returns an array of div ids.

My loadContent() function calls a $.ajax function which passes the recordIds and obtains the correct details to display.

Ie just doesn't want to work with my onChange() event. If I alert out the selectedId, I get the correct id. If I alert out the recordIds I get nothing.

function getSelectedTierPanels(tierId) {
    var container = $('#tier'+tierId+' a').map(function() { 
        return this.id.match(/\d+$/);
    }).get();
        return container;
}

But if I alert out the first parameter of the loadContent function, I get the correct response.

Any ideas?

Answer 1

One thing to check is what version of jquery are you using. There seems to have been an issue in versions less than 1.4.2. (Source)

A work-around based on suggestions there...

$("#select").change(function() {
    var selectedId = $(this).val();
    recordIds = getSelectedRecords(selectedId);
    loadContent('records', recordIds);
}).attr("onchange", function() { 
    var selectedId = $(this).val();
    recordIds = getSelectedRecords(selectedId);
    loadContent('records', recordIds);
});

It can probably be cleaned up a bit, or just update to a newer version of jquery.