一、前言

最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展。今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路。这是关于JQuery 中的 delegate 和 on 给动态元素绑定事件触发不了的问题。文章以下只用 delegate 举例。

二、JQuery 的 delegate 作用。

首先我们来了解一下 Delegate 的作用。一句话带过:“给动态添加的元素绑定事件”

看图:

下面九个测试按钮是通过点击上面的 “添加测试按钮” 按钮添加的。这就是动态添加元素的概念。接下来需求为每个添加的测试按钮都有统一的处理事件。这边作为测试,当点击时输出 “你点击了+按钮名称” 信息。 按平时绑定事件的方式,.click() 或者 on('click') 等等这些方式。代码如下

$(function(){
//“添加测试按钮” 按钮点击事件,测试按钮 class 为 new-btn
$("#add-btn").click(function(){
var test_btn_count = $('#btn-line button').size();
var new_btn_html = '<div class="new-btn btn">测试按钮'
+ (test_btn_count + 1)
+'</div>';
$('#btn-line').append(new_btn_html);
}); //用普通的click 绑定事件。很遗憾,没任何反应
$('.new-btn').click(function(){
console.log('你点击了按钮:'+$(this).text());
})
})

效果如图:

接下来我们将普通的绑定事件换成 delegate ,代码如下:

//btn-line 为存放 new-btn 的容器
$('.btn-line').delegate('.new-btn','click',function(){
console.log('你点击了按钮:'+$(this).text());
})

delegate 效果

至此,Delegate 解决了动态元素的事件绑定问题。

三、JQuery Delegate 在 IOS 系统中失效问题

上面好像已经实现了我们要的需求,但事实证明真正的坑还在后面。现在 Chrome 下面的 IOS模拟器下面全部正常。但是当项目正在跑在真机上,点击测试按钮又失去了反应。为了在手机上看到效果,我们先把 console.log 换成 alert

$('.btn-line').delegate('.new-btn','click',function(){
alert('你点击了按钮:'+$(this).text());
})

结果是界面直接懵圈了。

点击没有任何的 alert 信息

针对这个问题开始了搜索之旅,功夫不负有心人(其实不难搜到)。一切诡异的问题后面都会有一个神奇的解决方案。

给动态添加的 new-btn 添加 css cursor属性

.new-btn{
cursor: none;
}

神奇地好了

网友对此的回答如下:

答案地址

其实苹果对于性能的要求是近乎苛刻的,这样的特性应该是苹果为了节省性能开销而产生的一个bug。如果没有可点的特性的元素系统默认不会给它响应事件。而我们添加的这个 cursor 属性就是让元素看起来是可以点击的,也就向操作系统指明这个元素是需要响应事件的。

也就是说,想要一劳永逸,给body 添加 cursor:pointer 样式属性。或者按照网友提供的方法,通过js判断当前是否为苹果设备,如果是则加上。

代码如下:

if(/ip(hone|od)|ipad/i.test(navigator.userAgent)){
$("body").css("cursor","pointer");
}

其实我到时觉得css代码更干脆

body{
cursor:none;
  /*cursor:pointer;*/
}
//或者
*{
    cursor:pointer;
}

但是直接给body或者是给 * 添加这个属性都违背了苹果节约性能开销的初衷,最好的方式还是直接给需要响应事件的元素添加 cursor 属性.

.yourElementClass{
cursor:pointer;
}

限于笔者技术,文章观点难免有不当之处,希望发现问题的朋友帮忙指正,笔者将会及时更新。也请转载的朋友注明文章出处并附上原文链接,以便读者能及时获取到文章更新后的内容,以免误导读者。笔者力求避免写些晦涩难懂的文章(虽然也有人说这样显得高逼格,专业),尽量使用简单的用词和例子来帮助理解。如果表达上有好的建议的话也希望朋友们在评论处指出。

本文为作者原创,转载请注明出处! Cboyce

前端开发在IOS端遇到的一个诡异问题(Delegate 失效)的更多相关文章

  1. web前端开发与iOS终端开发的异同[转]

    * {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...

  2. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...

  3. Web前端开发与iOS终端开发的异同

    语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...

  4. Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...

  5. 【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem

    ! function() { var style = document.createElement("STYLE"), docEl = document.documentEleme ...

  6. JavaEE开发之记事本完整案例(SpringBoot + iOS端)

    上篇博客我们聊了<JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎>,并且在之前我们也聊了<Swift3.0服务端开发(五) 记事本的开发(iO ...

  7. iOS端IM开发从入门到填坑

      让App聊起来 IM开发从入门到填坑Demo IM的实现方式 拿来主义,使用第三方IM服务 IM的第三方服务商国内有很多,底层协议基本上都是基于TCP的,类似有网易云信.环信.融云.极光IM.Le ...

  8. 前端开发各种cross之cross domain

    作为一个苦逼前端开发工程师,不得不面对各种cross,比如面对五花八门的浏览器我们必须cross browser,面对各种终端,我们必须cross device,在这么多年的前端开发经历中,在不同的域 ...

  9. web前端开发-博客目录

    web前端开发是一个新的领域,知识连接范围广,处于设计与后端数据交互的桥梁,并且现在很多web前端相关语言标准,框架库都在高速发展.在学习过程中也常常处于烦躁与迷茫,有时候一直在想如何能够使自己更加系 ...

随机推荐

  1. CodeForces 621B Wet Shark and Bishops

    记录一下每个对角线上有几个,然后就可以算了 #include<cstdio> #include<cstring> #include<cmath> #include& ...

  2. SQLite Lemon 语法分析器学习与使用

    本文是浙江大学出版社的<LEMON语法分析生成器(LALR 1类型)源代码情景分析>学习笔记. 用到的Windows下的编译器介绍MinGW(http://www.mingw.org/): ...

  3. xCode中如何安装旧的模拟器

    http://blog.csdn.net/cmengzhongren/article/details/50414493 这里给出如何把老版本的SDK加入到新的Xcode中的方法.其实很简单,就是将老版 ...

  4. URL与String转换

    NSString *str = @"www.baidu.com"; NSURL *URL = [NSURL URLWithString:str];  //string>url ...

  5. AFNetworking封装思路简析

    http://blog.csdn.net/qq_34101611/article/details/51698473 一.AFNetworking的发展 1. AFN 1.0版本 AFN 的基础部分是 ...

  6. The account '...' is no team with ID '...'

    iOS升到9.2之后,有一个大坑,原先真机调试的开发者账号(未付费),连不了Xcode了,会弹出一个提示框提示你, The account '...' is no team with ID '...' ...

  7. 以太网数据包、IP包、TCP/UDP 包的结构(转)

    源:以太网数据包.IP包.TCP/UDP 包的结构 版本号(Version):长度4比特.标识目前采用的IP协议的版本号.一般的值为0100(IPv4),0110(IPv6). IP包头长度(Head ...

  8. HTML5离线应用与客户端存储

    序言 本篇文章会详细介绍使用HTML5开发离线应用的步骤,以及本地存储与cookie的一些异同,最后利用上面所学例子来实现一个购物车场景. 使用HTML5离线存储的基本过程如下: 离线检测:首先要对设 ...

  9. UVa 341 - Non-Stop Travel

    题目大意:给一个地区的地图,上面有若干路口,每个路口因为红灯的缘故要耽误一些时间,给出起点和终点,找出最短路径使得耽误时间最短. 单源最短路问题,Dijkstra算法.同时还要打印路径. #inclu ...

  10. linux 中环境变量配置错误导致部分命令不能使用包括vi

    1,使用 /bin/vi  /etc/profile 可以打开环境变量 2,修改正确后,重启