JQuery шоу () / скрыть () проблема в Internet Explorer? - PullRequest
Новая
       15

JQuery шоу () / скрыть () проблема в Internet Explorer?

8 голосов
/ 15 декабря 2008

Следующий HTML-код работает в Firefox, но по какой-то причине не работает в IE (Label2 не отображается). Это ошибка или я что-то пропустил?

Любая помощь будет оценена. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
        </script>
        <script>
            jQuery(document).ready(function(){
                function setVis(){
                    var val = $("#check").is(":checked");
                    if (val) 
                        $("#g_1").show();
                    else 
                        $("#g_1").hide();
                }

                setVis();
                $("#check").change(setVis);
            });
        </script>
    </head>
    <body>
        <span>
            <input type="checkbox" id="check" />
            <label>Label1</label>
        </span>
        <span id="g_1">
            <label>Label2</label>
        </span>
    </body>
</html>

Ответы [ 3 ]

15 голосов
/ 15 декабря 2008

Причина:

Для MSDN событие изменения равно

... срабатывает при фиксации содержимого а не в то время как значение меняется. Например, в текстовом поле это событие не срабатывает, пока пользователь печатает, а когда пользователь фиксирует изменить, оставив текстовое поле, которое имеет фокус.

Поведение для флажков аналогично: в IE событие не срабатывает до тех пор, пока фокус не будет удален из элемента (попробуйте: щелкните флажок, затем снимите флажок и поведение будет таким, как ожидалось). Firefox, очевидно, не уважает это различие.

Решение:

Используйте обработчик событий click вместо change: 

            $("#check").click(setVis);

... и поведение должно быть одинаковым во всех браузерах.

5 голосов
/ 15 декабря 2008

Помните, что событие onchange срабатывает после того, как вы установите флажок и затем оставите флажок . Вы пытались проверить это, а затем щелкнуть где-нибудь еще в документе?

Вместо этого вы можете использовать click и события нажатия клавиш в jQuery (для установки флажка с помощью click и пробела).

<sidequestion> Есть ли какая-либо причина, по которой вы объявляете / определяете функцию в абзаце с готовым документом, а не вне его?

Еще одно редактирование; Могу ли я порекомендовать этот более изящный код: 

jQuery(document).ready(function(){
    $("#g_1").hide();
    $("#check").change(function() { $("#g_1").toggle(); });
});
1 голос
/ 15 декабря 2008

Измените событие .change на событие .click. результат в обоих браузерах одинаков. в IE при установке флажка размытие не происходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...