时间戳

首页 > 解决方案 > jQuery UI checkboxradio图标在后退导航上不正确

jquery - jQuery UI checkboxradio图标在后退导航上不正确

问题描述

我有几个简单的复选框，每个都转换为 jQuery UI checkboxradio：

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

我可以检查和取消检查它们，它们按预期工作。

但是，当我转到另一个页面，然后checkboxradio通过按浏览器后退按钮返回到打开小部件的页面时，它们都显示不正确的图标，并且在选择时不会更改：

在此处输入图像描述

查看 web 检查器，图标的背景位置被 jQuery UI 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 UI 中时发生的问题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>

标签： jqueryjquery-ui

解决方案

这是我看到的情况，当您离开时，元素是：

<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;，这是第一个图标精灵的位置。

我修改了加载顺序，每次它都会恢复背景位置。在 Windows 上使用 Chrome 74（32 位）进行测试。

我认为这是由于 Chrome 读取内存中 DOM 的临时状态的方式。当您单击超链接时，浏览器会跟随请求并开始呈现新的 HTML 或从缓存中读取它。我们假设当您单击“返回”按钮时，Chrome 正在从缓存中加载内容或重新读取 HTML 以呈现它。当从 Cache 中获取 Class 属性时，可能会以不同的顺序读取属性，这可以解释为什么ui-icon优先于ui-icon-check.

没有看到测试这个理论的好方法。您可以尝试单击第 2 页，清除浏览器缓存，然后单击返回按钮。

我不知道你是否能够克服这一点。我通过添加自己的反向链接进行了测试，效果更好。

page-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>

page-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>

希望有帮助。

推荐阅读