jQuery нажмите изменить класс IE странность

Возможно, я пытаюсь слишком полюбить это.

У меня есть пара радио-кнопок в ряд с разделителем между ними с фоновыми изображениями. Когда нажата одна из "кнопок", я меняю ее класс. CSS для разделителя привязан к классам кнопок с обеих сторон, чтобы выбрать фоновое изображение. Я делаю это с помощью "родственных" селекторов CSS.

У меня есть события jQuery .click, связанные с "кнопками". первое, что они делают, это очищают "выбранный" класс от другой кнопки и устанавливают его на нажатой кнопке.

Например, если кнопка LEFT class='selected', а кнопка RIGHT - нет, разделитель между ними получит синий фон. Нажмите на кнопку ВПРАВО, и она получит class='selected', пока очищается класс кнопки LEFT. Делитель становится красным.

Это работает в IE, FF, Safari и т. Д. Но IE странный (IE7) - он будет отражать изменение фона делителя только тогда, когда я ОТКЛЮЧУЮ кнопку мыши по нажатой кнопке! То есть, в примере, кнопка ВПРАВО получает class='selected' и немедленно изменяется при нажатии. Но разделитель остается синим, пока я не нажму кнопку мыши, затем он станет красным.

Сам класс меняется, и в результате внешний вид кнопки изменяется. Только соседние вещи не делают!?

Это напоминает мне о моих старых днях VB6, когда вам приходилось периодически вызывать DoEvents, чтобы заставить Windows вносить изменения в пользовательский интерфейс. Может ли быть что-то подобное здесь для IE?

Источник

2 ответа

Решение

Я понятия не имею, почему это помогает, но добавление.hide(). Show() к селектору, который включает в себя материал, который изменил класс, кажется, заставляет его обновляться.

Источник

Я читал, что использование setAttribute для изменения класса заставит IE7 перерисовать стили. Попробуйте, и если это все еще не помогло, я решил аналогичную проблему IE7, переписав html, что заставило IE7 перерисовать (используя jquery):

if ($("html").hasClass("ie7")){
    var tempHolder = $("#ajaxresults").html();
    $("#ajaxresults").html(tempHolder);
}

Что касается тега html или body класса ie7, я рекомендую взглянуть на html5boilerplate.com. Если по какой-то причине вы не можете использовать их решение, jquery для этого:

    if ($.browser.msie){
        if ($.browser.version < 8){
            $("html").addClass("ie ie7");
        }
        else {
            $("html").addClass("ie");
        }
    }
Источник
Другие вопросы по тегам