addClass и removeClass не работают в Internet Explorer - PullRequest
Новая
       31

addClass и removeClass не работают в Internet Explorer

8 голосов
/ 10 марта 2011

Функции jQuery addClass и removeClass не работают должным образом, когда я использую их для изменения внешнего вида флажка в Internet Explorer (IE).Тем не менее, они отлично работают в других браузерах.

Вот пример кода, иллюстрирующий мою проблему: 

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

Для дальнейшего тестирования вы можете запустить код с помощью jsFiddler (не работает в IE): http://jsfiddle.net/tejek/pZJMd/

Ответы [ 2 ]

4 голосов
/ 10 марта 2011

Ваш селектор должен быть либо $('#chkbox'), если вы хотите, чтобы он работал только с одним флажком, с идентификатором chkbox , либо он должен быть $('input:checkbox'), если вы хотите, чтобы он работал с каждым флажком .

Кроме того, лучше использовать событие change вместо события click, потому что событие click (теоретически) не должно запускаться, если изменение было сделано чем-то другим, кроме щелчка мыши.

Может быть, попробовать что-то вроде этого: 

$('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

См. ДЕМО .

Если это не помогло, попробуйте добавить и удалить классы вручную в HTML, чтобы увидеть, может быть, проблема не в добавлении классов, а в том, что они не показывают эффекты добавления классов при странном рендеринге в режиме причуд или что-то в этом роде.

Убедитесь, что ваш HTML начинается примерно так: 

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

, чтобы быть уверенным, что вы всегда получаете максимальную отдачу от движка рендеринга IE.

1 голос
/ 10 марта 2011

Этот селектор input:#chkbox кажется странным. Попробуйте #chkbox, если у вас есть только один элемент с идентификатором #chkbox (а это поле <input />).

Кроме того, вам, вероятно, следует кэшировать результат $('#chkbox'), например ::

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

Вы можете даже использовать .toggleClass() с switch (второй аргумент, не проверено): 

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

Отказ
Нет, это не объясняет, почему он работал в Fx, Chrome и т. Д., А не в IE. Я предполагаю, что реализация селектора несколько отличается между браузерами. В общем, это может даже не решить проблему, а только намекает на потенциальные проблемы (и «более чистое» решение).

...