Safari iOS - 单击 link 后弹出 jQuery

Question

我正在使用 iOS 8.2

我有一个 div 和 class .loading-screen 和一个 link，当点击时，它会提示控制器做一些至少需要几秒钟的事情（生成一个文件），然后页面刷新。单击 link .generate-button 后，我想向用户显示一个弹出窗口，基本上是 "Your file is generating - please wait."

这是我的代码，经过修剪以显示基础知识：

jQuery

jQuery(document).ready(function() {

    jQuery(".generate-button").click(function (e) {
        alert('generating - click!');
        jQuery(".loading-screen#generating").addClass('show');
    });

});

HTML

<a href="http://example.com/link/generate/id/101/" class="button generate-button">Generate file</a>

....

<div class="loading-screen" style="display: none" id="generating">
    <p>Your file is generating!</p>
</div>

CSS

.loading-screen {
    z-index: 5000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.loading-screen.show {
    display: block !important;
}

在 Chrome 和 Firefox 上工作正常。我在使用 Safari 时遇到了一些问题，尤其是在 iOS.

上

我读到其他帖子指出 Safari 上的点击事件不起作用 - jQuery click events not working in iOS - 我的困惑是，使用我的代码，点击 link 时会显示警报，但是弹出窗口没有显示。

我尝试使用 jQuery(".generate-button").hover(...) 代替，这确实会生成弹出窗口，但随后（显然）不会导航到 link.

这是否与 Safari 意识到页面正在导航离开，因此不在页面上呈现任何进一步的更改有关？这是我目前唯一的理论。

在 Mac 上的 Safari 中，行为是页面导航离开（到 link 中给出的 URL），这与 Chrome/Firefox，但目前这对我来说不是问题。

感谢帮助或想法。谢谢。

Answer 1

IOS 不适用于点击事件。您应该为此修改代码：

jQuery(".generate-button").on("click tap", function (e) {
        alert('generating - click!');
        jQuery(".loading-screen#generating").addClass('show');
    });

Answer 2

我找到了解决方法，也许它会对其他人有所帮助：

更改按钮链接：

<button onclick="generateFile('http://example.com/link/generate/id/101/')" class="button generate-button">Generate file</button>

添加JS功能：

function generateFile(url) {
    jQuery(".loading-screen#generating").addClass('show');
    // 10ms delay so popup shows before page is navigated away from
    setTimeout(function() {
        window.location = url;
    }, 10);
}

setTimeout 也许可以用更好的方法来完成，但它对我有用；它会尝试确保 addClass 在调用 window.location 之前已完成并呈现。

我会尽可能（明天）接受我的回答。

Safari iOS - 单击 link 后弹出 jQuery

Safari iOS - jQuery popup after clicking on link

safari

jquery

mobile-safari

ios