jquery隐藏并确认窗口在Chrome中不起作用

Question

当我在html中使用隐藏和确认时。隐藏功能仅在Chrome中无法正常工作。当显示确认窗口时，"aa“元素不会隐藏。IE和FF工作得很好。

任何类型的建议都是值得感谢的。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide();
            if (!confirm('hide?')) {
                $('#aa').show();
                return;
            }
            $('#aa').show();
        }
    </script>
</body>
</html>

Answer 1

试试下面的代码，它工作正常。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').show();
            if (confirm('hide?')) {
                $('#aa').hide();
                return;
            }
            
        }
    </script>
</body>
</html>

Answer 2

请检查这个链接，这里是工作的StackOverflow链接element hide on alert，它不是工作的StackOverflow编辑器。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide();
            setTimeout(function () {
                if (!confirm('hide?')) {
                    $('#aa').hide();
                    return;
                }
            }, 100);
        }
    </script>
</body>
</html>

​

Answer 3

隐藏功能实际上工作正常。确认对话框是问题的原因。

出现此问题的原因是，在调用隐藏函数后(当浏览器重新绘制自身以隐藏元素时)，会立即触发确认对话框，该对话框会停止所有操作，直到得到响应。因此，隐藏功能直到确认对话框之后才完全运行。

解决方案： jQuery隐藏函数接受一个回调函数see doc。因此，只有在隐藏元素之后，我们才会调用确认对话框。

.hide( duration [, easing ] [, complete ] ) 
// Default duration = 400, easing = swing

如果你想让它快速隐藏，你可以传递一个100的持续时间

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide(100, function () {
                if (!confirm('hide?')) {
                    $('#aa').show();
                    return;
                }
                $('#aa').show();
            });
        }
    </script>
</body>
</html>