手機端與電腦點擊事件不一致

問題如圖所標，在電腦上正常運行的，i輸出0,但是在手機上直接輸出了2，不知道為啥。
完整代碼如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style type="text/css">
        ::-webkit-scrollbar {
                width: 0px;
        }
        iframe{
            display: block;
            border:none;
        }
        html,body,.container{
            height: 100%;
            overflow: auto;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
        iframe{
            height: 98vh;
            width: 100%;
        }
        #next{
            text-align: right;
        }
        .btn{
            padding: 6px 12px;
            color: #4ac6d6;
            background: #fff;
        }
        .grey{
            color: #999;
        }
    </style>
<script>
        
</script>
</head>
<body>
    <div class="container">
        <iframe id="iframe" src="https://www.baidu.com/"></iframe>
        <p class="hit"></p>
        <p id="next"><span class="btn">下一份</span></p>
    </div>
    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script>
        var arr = ['https://www.baidu.com/','https://www.taobao.com/','https://www.baidu.com/','https://www.taobao.com/','https://www.baidu.com/','https://www.taobao.com/','https://www.baidu.com/','https://www.taobao.com/']
        var i=0;
        var len = arr.length,
            iframe = $("#iframe"),
            hit  = $(".hit"),
            btn = $("#next").find(".btn")
        $(".container").on("click","#next",function(){
            iframe.attr("src",arr[i])
            // hit.append(`<span>${i}</span>`)
            hit.html(i)            
            i++
            if(i==len){
                $(this).off("click")
                btn.addClass("grey")
                btn.html("已經是最后一份了")
            }
        })
    </script>
</body>
</html>

回答

編輯回答