javascript - jQuery 在移动版 Safari 的 <a> 标签上显示

Question

这适用于 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>

JS

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

CSS

.loading {
    display: none;
}

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

我是不是错过了一些简单的东西来让它在移动版 Safari 上运行？

Answer 1

我会尝试:

首先，删除内联onclick属性

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

使用例如 jQuery 绑定(bind)事件并防止默认行为和延迟 一点重定向:{我将它委托(delegate)给 document 级别，这样你 确保无论何时/何地设置此事件都会被触发

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