I can't seem to figure out why my jQuery UI Buttonset is not working properly in IE8. Apparently, in IE when a button (label) is clicked it doesn't fire a change event for it's corresponding input. This breaks my functionality. I've already tried using the click event but no luck. Any help would be much appreciated.
Here's my page: http://www.indsci.com/Calibration-Gas-Cross-Reference-Chart/
$(document).ready(function(){
$('.loadbar').hide();
$('.uxGasProducts').fadeIn(1000);
$( ".calgases .select-gases div.row1" ).buttonset();
$( ".calgases .select-gases div.row2" ).buttonset();
function refine_search_multi() {
$('#table-2').show();
if ($('.checkboxGas').is(':checked')){
$('.CH4, .CL2, .ClO2, .CO, .CO2, .H2, .H2S, .HCl, .HCN, .LEL, .NO2, .NO, .NH3, .O2, .PH3, .PID, .SO2, .empty').hide();
} else {$('#table-1 tr, #table-2 tr').not('.keep').show(); $('.specific-title-cal-gas').hide();}
var theclass = "";
$('#table-1 tr, #table-2 tr').not('.keep').hide();
var theclass = "";
var thetitle = "";
if ( $('input[value=Benzene]').is(':checked') ) {theclass += ".Benzene"; thetitle += ".Benzene"};
if ( $('input[value=Hexane]').is(':checked') ) {theclass += ".Hexane"; thetitle += ".Hexane"};
if ( $('input[value=Toluene]').is(':checked') ) {theclass += ".Toluene"; thetitle += ".Toluene"};
if ( $('input[value=ZeroGradeAir]').is(':checked') ) {theclass += ".ZeroGradeAir"; thetitle += ".Zero Grade Air"};
if ( $('input[value=Butadiene]').is(':checked') ) {theclass += ".Butadiene"; thetitle += ".Butadiene"};
if ( $('input[value=Pentane]').is(':checked') ) {theclass += ".Pentane"; thetitle += ".Pentane"};
if ( $('input[value=C4H8]').is(':checked') ) {theclass += ".C4H8"; thetitle += ".Isobutylene"};
if ( $('input[value=C3H8]').is(':checked') ) {theclass += ".C3H8"; thetitle += ".Propane"};
if ( $('input[value=CH4]').is(':checked') ) {theclass += ".CH4"; thetitle += ".Methane"};
if ( $('input[value=CL2]').is(':checked') ) {theclass += ".CL2"; thetitle += ".Chlorine"};
if ( $('input[value=CO]').is(':checked') ) {theclass += ".CO"; thetitle += ".Carbon Monoxide"};
if ( $('input[value=CO2]').is(':checked') ) {theclass += ".CO2"; thetitle += ".Carbon Dioxide"};
if ( $('input[value=H2]').is(':checked') ) {theclass += ".H2"; thetitle += ".Hydrogen"};
if ( $('input[value=H2S]').is(':checked') ) {theclass += ".H2S"; thetitle += ".Hydrogen Sulfide"};
if ( $('input[value=HCl]').is(':checked') ) {theclass += ".HCl"; thetitle += ".Hydrogen Chloride"};
if ( $('input[value=HCN]').is(':checked') ) {theclass += ".HCN"; thetitle += ".Hydrogen Cyanide"};
if ( $('input[value=LEL]').is(':checked') ) {theclass += ".LEL"; thetitle += ".Lower Explosive Limit"};
if ( $('input[value=NH3]').is(':checked') ) {theclass += ".NH3"; thetitle += ".Ammonia"};
if ( $('input[value=NO]').is(':checked') ) {theclass += ".NO"; thetitle += ".Nitric Oxide"};
if ( $('input[value=N2]').is(':checked') ) {theclass += ".N2"; thetitle += ".Nitrogen"};
if ( $('input[value=NO2]').is(':checked') ) {theclass += ".NO2"; thetitle += ".Nitrogen Dioxide"};
if ( $('input[value=O2]').is(':checked') ) {theclass += ".O2"; thetitle += ".Oxygen"};
if ( $('input[value=PH3]').is(':checked') ) {theclass += ".PH3"; thetitle += ".Phosphine"};
if ( $('input[value=SO2]').is(':checked') ) {theclass += ".SO2"; thetitle += ".Sulfur Dioxide"}
formatedClass = thetitle.replace(/\./g, ", and ");
finalClass = formatedClass.replace(", and", "");
$('.specific-title-cal-gas span').html(finalClass);
$('.specific-title-cal-gas').show('slow');
$(theclass).show();
var theTHeight = document.getElementById("getheight").offsetHeight;
if (theTHeight <= 110)
{$('.empty').show();}
else {$('.empty').hide();}
var theHeight = document.getElementById("table-2").offsetHeight;
if (theHeight <= 60)
{$('#table-2').hide();}
else {$('#table-2').show();}
}
$('.calgases input').change(function() {
$('#table-2').show();
if ($('.calgases .checkboxGas').is(':checked')){
refine_search_multi();
} else {
$('#table-1 tr, #table-2 tr').not('.keep').show();
$('.specific-title-cal-gas').hide();
}
}); $('.clear-all').click(function() {
$('.empty').hide();
$('.specific-title-cal-gas').hide('slow');
$('#table-1').show();
$('#table-2').show();
$('table tr').show();
$('label').removeClass('ui-state-active');
$('input:checkbox').attr('checked', false);
$('input:radio').attr('checked', false);
}); $('.row2 label').click(function() {
$('.row1 label').removeClass('ui-state-active');
$('input:checkbox').attr('checked', false);}); $('.row1 label').click(function() {
$('.row2 label').removeClass('ui-state-active');
$('input:radio').attr('checked', false);});});
I have resolved this issue. The problem wasn't with my JavaScript but with CSS. I had hidden the input elements with CSS instead of positioning them off page. Because their containing element was relatively positioned the absolute positions wouldn't place them out of view.
In IE8 if an input element is hidden the change event is not fired.