为什么这个JQuery代码会在移动设备上中断

Why does this JQuery code break on mobile devices?

本文关键字:移动 中断 JQuery 代码 为什么      更新时间:2023-09-26

我有以下代码,适用于所有桌面浏览器:

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浏览器。试一下