為什么這個JQuery代碼在移動設備上中斷？

Question

我有以下代碼適用於所有桌面瀏覽器：

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效果，所以我知道觸摸事件正在注冊為點擊）。

任何人都知道為什么這個代碼會在移動設 非常感謝您的幫助！

Answer 1

由於ios 8中的300 ms延遲（分接延遲），可能會發生這種情況。您可以嘗試引入此元標記以避免延遲（從各種來源讀取）

<meta name="viewport" content="width=device-width, user-scalable=no">

我希望它至少適用於ios上的mobile-chrome瀏覽器。 試一試吧