Переопределить флажок в JavaScript с помощью jQuery - PullRequest
Новая
       11

Переопределить флажок в JavaScript с помощью jQuery

1 голос
/ 20 мая 2010

Помощь с поведением флажка модульного тестирования. У меня есть эта страница: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
            $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

            $('#makeHidden').click(function() {
                var isChecked = $(this).is(':checked');

                if (isChecked) {
                    $('#displayer').hide();
                }
                else {
                    $('#displayer').show();
                }
                return false;
            });

        });

    </script>
</head>
<body>
</body>
</html>

Это не работает, это из-за return false; в обработчике кликов. Если я удаляю его, он прекрасно работает. Проблема в том, что если я вытащу функцию щелчка в ее собственную функцию и протестирую ее с помощью qunit, она не будет работать без return false;

[EDIT] Используя ответ @ patrick, мои результаты:

Firefox:

  • Ручная проверка игрушки - хорошо.
  • Модульные тесты - хорошо.
  • Ручная проверка производственного приложения - хорошо.

Internet Explorer:

  • Ручная проверка игрушки - ошибка.
  • Модульные тесты - хорошо.
  • Ручная проверка производственного приложения - ошибка.

Internet Explorer требует изначально, одним щелчком мыши. после этого требуется два клика.

Я думал, что jQuery - это абстрагирование браузеров?

Должен ли я переопределить все поведение флажка для решения?

В моих модульных тестах я выполняю симуляцию флажка пользователя: 

$(':input[name=shipToNotActive]').removeAttr('checked');
$('#shipToNotActive').change();

а также: 

$(':input[name=shipToNotActive]').attr('checked', 'checked');
$('#shipToNotActive').change();

Ответы [ 3 ]

4 голосов
/ 20 мая 2010

Как насчет использования change вместо click? 

$('#makeHidden').change(function() {
            var isChecked = $(this).is(':checked');

            if (isChecked) {
                $('#displayer').hide();
            }
            else {
                $('#displayer').show();
            }
            return false;
        });

return false; не будет мешать, так как событие происходит в результате произошедшего изменения.

2 голосов
/ 20 мая 2010

Вот обходной путь.

Теперь мой код выглядит так: 

        if ($.browser.msie) {
            $('#makeHidden').change(function () {
                this.blur();
                this.focus();
                onCheckboxClicked();
            });
        }
        else {
            $('#makeHidden').change(function() {
                return onCheckboxClicked();
            });
        }

Все мои тесты, включая ручную игрушку и ручное производство, хороши.

У кого-нибудь есть что-нибудь лучше, чем этот хак?

0 голосов
/ 20 мая 2010

Попробуйте это: 

$(function() {
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

    $('#makeHidden').click(function() { return onCheckboxClicked(this) } );
});

function onCheckboxClicked(el) {
    var isChecked = $(el).is(':checked');

    if (isChecked) {
        $('#displayer').hide();
    }
    else {
        $('#displayer').show();
    }
    return false;
}
...