Question

我似乎无法弄清楚为什么我的jQuery UI Buttonset在IE8中无法正常工作。显然，在IE中单击按钮（标签）时，它不会为其相应的输入触发更改事件。这打破了我的功能。我已经尝试过使用点击事件但没有运气。任何帮助将不胜感激。

这是我的页面：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);});});

Answer 1

我已经解决了这个问题。问题不是我的JavaScript，而是CSS。我用CSS隐藏了输入元素，而不是将它们放在页面之外。因为它们的包含元素是相对定位的，所以绝对位置不会将它们排除在外。

在IE8中，如果隐藏了输入元素，则不会触发更改事件。

jQuery UI按钮组在IE8中不起作用

1 个答案: