为什么这个JQuery代码会在移动设备上中断
Why does this JQuery code break on mobile devices?
我有以下代码,适用于所有桌面浏览器:
JQuery:
$('.select-one-style').on('click',function(){
$('.select-one-style').removeClass('active');
$(this).toggleClass('active');
var radioBtn = $(this).children('input[type=radio]');
radioBtn.prop('checked', true);
})
HTML:
<div class="choice-box select-one-style">
<img src="/static/shipment/images/style-wall-street.jpg" alt="Wall Street" />
<p>Wall Street</p>
<input type="radio" name="look-type" value="wall-street" />
</div>
<div class="choice-box select-one-style">
<img src="/static/shipment/images/style-classic.jpg" alt="Classic" />
<p>Classic</p>
<input type="radio" name="look-type" value="classic" />
</div>
<div class="choice-box select-one-style">
<img src="/static/shipment/images/style-hipster.jpg" alt="Hipster" />
<p>Hipster</p>
<input type="radio" name="look-type" value="hipster" />
</div>
<div class="choice-box select-one-style">
<img src="/static/shipment/images/style-preppy.jpg" alt="Preppy" />
<p>Preppy</p>
<input type="radio" name="look-type" value="preppy" />
</div>
然而,每次我在iOS上使用移动浏览器(Safari和Chrome)访问我的网站(尚未测试android)时,当我点击图像/输入时,单选按钮都不会被选中(尽管会发生CSS效果,所以我知道触摸事件被注册为点击)。
有人知道这个代码为什么会在手机上坏掉吗?非常感谢您的帮助!
这可能是由于ios 8中的300毫秒延迟(分接延迟)造成的。你可以尝试引入这个元标签来避免延迟(从各种来源读取)
<meta name="viewport" content="width=device-width, user-scalable=no">
我希望它至少适用于ios上的移动chrome浏览器。试一下
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- 如何从画布上的某个移动事件中获取X和Y
- 触摸移动时切换到新元素
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 停止jQuery UI滑块移动超过给定值
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 高亮显示与数组字符串一起使用时文本插件中断
- AngularJS代码在一个代码笔中工作,但在移动时会中断
- 为什么这个JQuery代码会在移动设备上中断
- 使用弹出模式中断k-pager-nav以确认/拒绝移动到新页面
- 触摸事件因 Chrome 移动模拟器中的 ReactJS 升级而中断
- 整页.js - 设置响应宽度和滚动溢出在移动设备上中断页面
- D3在鼠标上沿路径移动圆平移X轴上的直线时移动中断
- AngularJS移动ui-view会中断渲染
- 使用append()移动对象后,jQuery侦听器目标似乎中断了
- KnockOut绑定在移动DOM元素后中断