jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案

用一个div当做了一个按钮来使用。

<div class="button">
    <div class=" next_button button_left btn_red" style="width: 345px;">
    下一步
    </div>
</div>

因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下:

$(document).on("click",".next_button",function(){
    alert();
});

这个时候,使用苹果手机访问的时候,发现了一个坑爹的问题,如论如何点击“下一步”,都没有任何反应,可是在安卓和各种模拟器中一切正常。后来经过查找资料才知道,苹果有这么个设置: 
对于点击的对象,拥有cursor:pointer这个样式的设置,也就是说,鼠标放上去,能够出现“手”型的图标才被认作可以使用点击事件,于是果断增加了样式

<style>
    .next_button{
        cursor:pointer
    }
</style>

 

原因:

冒泡事件是标准存在的,jquery的on事件也是没有问题。
问题出在,你要给你的dom写一个css样式 cursor:pointer
因为safari认为这才是一个可点击区域,这样表达更加友好,才会让你可以click,你才可以点击,你才可以绑定。

又或则你是一个<a>标签,然后<a>标签里面只有是<img>标签,你的<a>标签用on绑定click事件也是可以的,其他的标签都被无视click了。

又或则你用tap事件,又或则你直接仿写click,摁下超过300毫秒再触发都是可以的。

希望我的答案可以帮助到其他开发web移动端的小伙伴

作者:bo Bo
链接:https://www.zhihu.com/question/23689377/answer/48964971
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

时间: 2024-10-13 05:47:46

jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案的相关文章

防止异步刷掉jquery加载绑定事件

<script type="text/javascript" language="javascript">        var prm = Sys.WebForms.PageRequestManager.getInstance();        prm.add_endRequest(function () {            //在这下面写你的js或jquery代码,防止异步刷掉jquery加载绑定事件            $(functio

jquery使用on绑定事件的高级方法

$(doucment).on("click",".main",function(){ } //当页面中需要对发送ajax成功后生成的元素绑定事件时:就需要用到jquery的on方法来绑定事件:因为用这样的事件代理的方法:可以吧事件对象的事件代理到document上:这样就可以通过document来找到你要绑定的元素的对象上:

jquery中on绑定事件

之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 $("div").click(function(alert("aaa")){}); 那么动态创建的元素是触发不了这个事件的 这是就要用到on来绑定事件了. 但是在W3C中并没有on事件  只有live,delegate 这是由于这里的更新很不及时  ,建议去http:/

jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

jQuery on()方法绑定事件

jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个)  也可以为其子元素加事件(一个或多个) 自己加事件例子: $('ul').on('click',function(event){ alert(this); }); 为子元素加事件例子  相当于事件委托  应用场景 比如dom数没有加载完的时候是无法给标签元素添加时间的  但是可以使用事件委托的办法 委托给body $('body').o

jQuery动态行绑定事件,发生重复绑定解决方案

背景: 系统需要动态增加分类,各分类下有各自的3项资金(有资金小计,问题就出在这里). 问题: 新增一条分类,需要给3项资金新绑定小计功能.这个时候会发现,初始第一行的计算,会调用两次,增加到三行的时候,第一行会重复计算三次,第二行会重复计算两次...以此类推 为什么会执行多次? 猜词: 新增一行,绑定计算函数,历史分类会累计事件.也就是说,每新增一行,历史的每一个分类都会增加一次事件绑定. 方案: 绑定事件前,删除事件.jQuery提供了on().live()绑定方法,对应的解绑事件off()

浅谈jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

Jquery on方法绑定事件后执行多次

$("#btnOktcHc").on("click", function () {}); $("#btnOktcHc").off("click"); on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次.

jquery为元素绑定事件

语法 $(selector).live(event,data,function) 参数event 必需,规定附加到元素的一个或多个事件.由空格分隔多个事件,必须是有效的事件.data 可选,规定传递到该函数的额外数据.function 必需,规定当事件发生时运行的函数. 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></s