Question

我有几个简单的复选框，每个复选框都转换为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>

Answer 1

这是我所看到的，当您离开时，该元素是：

<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或从Cache中读取它。我们假设您单击“后退”按钮时，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>

希望有帮助。

jQuery UI checkboxradio图标在向后导航时不正确

1 个答案: