Question

我正在使用iOS 8.2

我有一个带有.loading-screen类的div和一个链接，当点击它时，会提示控制器执行至少需要几秒钟的时间（生成一个文件），然后刷新页面。单击链接.generate-button后，我想向用户显示一个弹出窗口，其中基本上显示“您的文件正在生成 - 请稍候。”

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

的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 - 我的困惑在于，使用我的代码，点击链接时会显示提醒，但弹出窗口未显示

我尝试使用jQuery(".generate-button").hover(...)代替，这确实生成了弹出窗口，但后来（显然）没有导航到链接。

是否与Safari有关，意识到页面正在被导航，所以不在页面上进行任何进一步的更改？这是我目前唯一的理论。

在Mac上的Safari中，行为是页面被导航（到链接中给出的URL），这与Chrome / Firefox不同，但这对我来说不是一个问题。< / p>

帮助或想法赞赏。感谢。

Answer 1

我找到了一个解决方法，也许它会帮助其他人：

更改按钮的链接：

<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之前呈现。

我可以（明天）接受我的回答。

Answer 2

IOS不适用于点击事件。你应该修改你的代码：

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

Safari iOS - 点击链接后的jQuery弹出窗口

2 个答案: