jQuery 在移动 Safari 上的 <a> 标记上显示答案

【问题标题】：jQuery show on <a> tag on mobile SafarijQuery 在移动 Safari 上的 <a> 标记上显示
【发布时间】：2014-12-18 14:56:53
【问题描述】：

这适用于 Chrome 和 Firefox，但不适用于移动版 Safari。我试图在单击链接时简单地显示一个 img。 jQuery 1.10.1

HTML

<h1>Region</h1> <img src="/static/img/ajax-loader.gif" class="loading" />
<hr>
<div class="list-group">
    <a onclick="clickMe()" class="list-group-item" href="/feedback/studio/110/">Colorado <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</div>

<script type="text/javascript">
function clickMe() {
    $('.loading').show();
}
</script>

CSS

.loading {
    display: none;
}

点击链接时图片不显示。如果我将 href 更改为“#”进行测试，图像会显示。如果我在点击链接后返回浏览器，图像是可见的，但我当然试图让它在点击链接时显示。

我是否遗漏了一些简单的东西来让它在移动 Safari 上运行？

【问题讨论】：

您需要阻止默认的锚点点击行为，但是您期望将其设置为针对其他页面的 href 属性会产生什么结果？也许延迟重定向让.loading 动画有足够的时间显示。但听起来你想在那里使用一些 ajax 逻辑。编辑：如果它在 Safari 移动设备上不起作用，这是因为此浏览器如何处理页面重定向时的 javascript 执行，阻止任何无用的脚本执行
我想链接到另一个页面，但在单击链接时显示加载，因为下一页会进行一些 API 调用并进行一些计算，因此加载需要几秒钟。
所以尽量防止默认行为和延迟重定向，例如使用超时让 UI 有足够的时间重绘。不确定它是否会在 Safari 移动设备上按预期工作

标签： javascript jquery html safari

【解决方案1】：

我会尝试：

首先，移除内联onclick属性

<a class="list-group-item" href="/feedback/studio/110/">Colorado <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>

使用例如 jQuery 绑定事件并防止默认行为和延迟一点重定向：{我将其委托给document 级别，所以你确保无论您在何时/何地设置它都会触发此事件}

$(document).on('click', '.list-group-item', function(e){
     e.preventDefault();
     var self = this;
     setTimeout(function(){
         window.location = self.href;
     },250);
});

【讨论】：