在苹果5移动设备上使用jquery事件时无效

由于项目需求,使用苹果5手机访问的时候,发现了一个坑爹的问题,
如论如何点击“下一步”,都没有任何反应,
可是在安卓和苹果6,7,8各种模拟器中一切正常.
望各位大佬指点。





##@zhumengniao

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
                  *{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link{
    text-decoration:none;
}
html,body{
    width: 100%;
    /* height: 100%; */
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    list-style: none;
    list-style-type: none;
    background-color: white;
    /* overflow: hidden; */
    /* position: absolute; */
}
.wrapper{
    width: 100%;
    /* height: 100%; */
}
.wrapper-nav{
    width: 100%;
    /* height: 8%; */
    line-height: 3rem;
    background-color: rgb(255, 255, 255);
    text-align: center;
}
.wrapper-nav img{
    width: 30%;
    margin-top: 5%;
}
.register{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.register-type{
    border-bottom: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
}
.register-type a{
    width: 49%;
    line-height: 4rem;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    color: #4d4d4d; 
}
.register-phoneNumber{
    margin-top: 3%;
}
.register-phoneNumber-box{
    width: 100%;
    /* height: 4rem; */
    /* line-height: 4rem; */
    border-radius: 5px;
    margin-top: 3%;
    border: 1px solid #ccc;
}
.register-phoneNumber-box input{
    width: 65%;
    font-size: 16px;
    height: 2.7rem;
    padding: 2%;
    border: 0;
    outline: 0;
    border-radius: 5px;  
    background-color: transparent;

}
.register-phoneNumber-box a{
    font-size: 16px;
    color: #00b4ef; 
}
.register-button{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20%;
    border-radius: 25px;
    background-color: #ccc;    
}
.register-button a{
    font-size: 26px;
    color: white;
    line-height: 4rem;
}
.otherContacts{
    width: 100%;
    margin-top: 8%;
    text-align: center;
}
.otherContacts span{
    margin: 2%;
    display: block;
}
.otherContacts a{
    width: 10%;
    display: inline-block;
    margin: 5%;
}
.otherContacts img{
    width: 100%;
}
.otherContacts p{
    font-size: 12px;
    text-align: center;
    margin-top: 6%;

}


        </style>
    <title>登录</title>
</head>
<body>
    <div class="wrapper">
            <!-- 导航栏 -->
        <div class="wrapper-nav">
            <img src="img/logo.png" alt="">
        </div>
        <hr>
           <!-- 登录 -->
        <div class="register">
            <div class="register-type">
                <a id="withoutCodeLogin" class="tab_selected" href="javascript:changeToLogin(1);">免密登录</a>
                <a id="withoutCodeRegister" href="javascript:changeToLogin(2);">账号注册</a>
            </div>
            <div class="register-phoneNumber" id="box-left">
                <div class="register-phoneNumber-box">
                        <input type="text" placeholder="请输入手机号" >
                </div>
                <div class="register-phoneNumber-box">
                        <input type="text" placeholder="6位数字验证码">
                        <a href="">获取验证码</a>
                </div>
            </div>
            <div class="register-phoneNumber" id="box-right" style="display: none;">
                 <div class="register-phoneNumber-box">
                         <input type="text" placeholder="手机号/邮箱" >
                 </div>
                 <div class="register-phoneNumber-box">
                         <input type="text" placeholder="6位数字验证码">
                         <a href="">获取验证码</a>
                 </div>
             </div>
        </div>

           <!-- 登录button -->
        <div class="register-button"><a href="">登录</a></div>

         <!-- 其它方式 -->
         <div class="otherContacts">
            <span>其它方式登录</span>
            <hr>
            <a href=""><img src="img/douyin.png" alt=""></a>
            <a href=""><img src="img/weixin.png" alt=""></a>
        </div>
    </div>


    <script src="https://www.telabytes.com/static/assets/js/jquery-3.1.1.min.js"></script>
    <script>
        function changeToLogin(num) {
            if (num == 1) {
                $("#withoutCodeLogin").addClass("tab_selected")
                $("#withoutCodeRegister").removeClass("tab_selected")
                $("#box-left").css("display", "")
                $("#box-right").css("display", "none")
            } else {
                $("#withoutCodeRegister").addClass("tab_selected")
                $("#withoutCodeLogin").removeClass("tab_selected")

                $("#box-left").css("display", "none")
                $("#box-right").css("display", "")
            }
        }


    </script>



</body>
</html>

1个回答

你得上代码,看你的下一步代码才能给大家判断

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

1
手机视频播放插件安卓,苹果兼容性问题
3
在ios中的safari中开启摄像头并使用的方案,谢谢各位帮忙。
3
wx.previewImage 黑屏 苹果好用,安卓黑屏
2
随机匹配陌生人聊天,审核时苹果说是聊天轮盘("Chat Roulette")被拒绝, 有知道的吗
2
有没有申请过台湾公司的苹果开发者账号?
2
select or die 苹果手机点击区域
2
苹果6手机,系统IOS 10,如何不越狱修改MAC地址,寻大神!!
1
开发的html网页在苹果版微信以能正常显示,但是安卓版微信上不能正常显示?
0
cmpp2.0协议长短信,苹果手机无法收全?
3
vue+vux移动端input标签苹果手机无法输入中文,无法调出中文输入法
1
新手求教:关于虫子吃苹果问题
2
html5 百度定图定位,在苹果手机好用,在安卓手机,浏览器内定位是精确的,微信内置浏览器定位不好用
3
其他浏览器中的链接,强制使用safari打开
9
网页多张连续图片时,图片之间有白线
1
如何解决苹果 iso safari下div元素滑动时,不让同级div元素跟着滑动,并且还有橡皮筋效果的问题
3
forEach遍历json数据填充表格,删除指定行。
2
fragment跳转另一个fragment的问题!
2
苹果企业账号的描述文件过期后,APP闪退,请问各位大神有好的解决方案么?
1
项目中遇到了一个算法问题,求推荐个解决思路;
1
多个手机与多个硬件在不依靠网络 进行数据交互问题