Неправильный значок флажка интерфейса пользователя jQuery при обратной навигации - PullRequest
Новая
       5

Неправильный значок флажка интерфейса пользователя jQuery при обратной навигации

0 голосов
/ 21 мая 2019

У меня есть несколько простых флажков, каждый из которых преобразуется в пользовательский интерфейс jQuery checkboxradio: 

$( document ).ready(function() {
    $( "#my-form" ).find( "input[type=checkbox]" ).checkboxradio();
}

Я могу установить и снять их, и они работают как положено.

Однако,когда я перехожу на другую страницу, затем возвращаюсь на страницу с включенными виджетами checkboxradio, нажимая кнопку возврата браузера, все они отображают неправильный значок и не изменяются при выборе:

enter image description here

Глядя на веб-инспектор, фоновая позиция значка переопределяется с помощью пользовательского интерфейса jQuery CSS: 

.ui-state-hover, .ui-widget-content .ui-state-hover {
    background-position-x: initial;
    background-position-y: initial;
}

Правильная фоновая позиция, которая перечеркнута, должно быть (если отмечено): 

.ui-icon-check {
    background-position: -64px -144px;
    background-position-x: -64px;
    background-position-y: -144px;
}

Это пример label, единственная разница до / после обратной навигации в том, что ui-state-hover устанавливается на первый span, когда я возвращаюсь кстраница, которая приводит к неправильному значку: 

<label for="B21-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
    <span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked ui-state-hover"></span>
    <span class="ui-checkboxradio-icon-space"> </span>
    14 Jan 2020 - 24 Mar 2020
</label>

Как я могу предотвратить искажение класса при наведении на значок формы?Я пытался уничтожить и воссоздать виджеты безрезультатно.

Редактировать:

Я сузил проблему, возникающую в Chrome (не Safari) и когдаcheckboxradio виджеты находятся в пользовательском интерфейсе jQuery dialog.

Я могу воспроизвести его в Chrome со следующим минимальным кодом: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 1</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css">
    <script>
        $( document ).ready(function() {
            $( "#my-dialog" ).find( "input[type=checkbox]" ).checkboxradio();
            $( "#my-dialog" ).dialog();
        });
    </script>
</head>
<body>
    <div id="my-dialog">
        <label for="test">Test</label>
        <input type="checkbox" id="test" value="test">
        <a href="page-2.html">Next</a>
    </div>
</body>
</html>

Где page-2.html - это любая старая страница, которая,при загрузке вы переходите обратно к page-1.html с помощью кнопки возврата браузера: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 2</title>
</head>
<body>
    <p>Now navigate back.</p>
</body>
</html>

1 Ответ

1 голос
/ 22 мая 2019

Вот что я вижу, когда вы уходите, элемент выглядит так: 

<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"></span>

Когда вы перемещаетесь назад, если вы проверяете его, вы видите, что ui-icon читается с более высоким приоритетом, чем ui-icon-check, и фоновая позиция установлена ​​на background-position: 0 0;, и это позиция первого значок спрайт.

Я возился с порядком загрузки и каждый раз, когда он меняет положение фона. Протестировано с Chrome 74 (32-разрядная версия) в Windows.

Я думаю, это связано с тем, что Chrome считывает временное состояние DOM в памяти. Когда вы нажимаете гиперссылку, браузер выполняет запрос и начинает рендеринг нового HTML-кода или чтение его из кэша. Мы предполагаем, что при нажатии кнопки «назад» Chrome загружает содержимое из кэша или перечитывает HTML-код для его визуализации. Возможно, что атрибуты Class читаются в другом порядке при переносе из Cache, и это объясняет, почему ui-icon имеет приоритет над ui-icon-check.

Не вижу хорошего способа проверить эту теорию. Вы можете попробовать перейти на страницу 2, очистить кеш браузера и нажать кнопку «Назад».

Я не знаю, что вы сможете преодолеть это. Я провел тестирование, добавив свою собственную ссылку "Назад", и это работает лучше.

страница-1.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 1</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
        $( "#my-dialog" ).dialog();
        $( "#test" ).checkboxradio();
        });
    </script>
</head>
<body>
    <div id="my-dialog">
        <label for="test">Test</label>
        <input type="checkbox" id="test" value="test">
        <a href="page-2.html">Next</a>
    </div>
</body>
</html>

страниц 2.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page 2</title>
</head>
<body>
    <p>Now navigate <a href="page-1.html">back</a>.</p>
</body>
</html>

Надеюсь, это поможет.

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

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

...