在做一个微信公众号项目的时候，遇到了苹果手机微信浏览器跟安卓微信浏览器事件绑定的不同。
TestCode1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div id="boxme">
<div class="test test1">测试Body绑定事件</div>
<div class="test test2">测试Document绑定事件</div>
<div class="test test3" style="background:#bbb">测试window绑定事件</div>
<div class="test test4">测试html绑定事件</div>
<div class="test test5">测试DivID绑定事件</div>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓和苹果都能响应点击
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //苹果和安卓都能响应点击
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //安卓和苹果都不能响应，除非将window的首字母w大写才能响应点击
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓和苹果都能响应点击
$(".wraper").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都能响应点击
});
</script>
</body>
</html>
TestCode1的测试结果说明，对于页面上固有的元素（即不是JavaScript动态创建插入到页面的元素），使用jquery的on方法进行绑定，安卓和苹果的表现是一样的。
TestCode2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30" onclick="createBox()">动态创建DOM元素</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '<div id="boxme">';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
htmlstr += '</div>';
$(htmlstr).appendTo("body");
}
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓能响应，苹果不能
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //安卓能响应，苹果不能
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //将window首字母大写，则安卓能响应，苹果不能。window首字母不大写，则安卓和苹果都不能
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓能响应，苹果不能
$("#boxme").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都不能响应
});
</script>
</body>
</html>
TestCode2的测试结果说明：对于JavaScript动态创建并且直接插入到body中的DOM元素及其子元素（即：这些JavaScript动态创建的DOM元素，只能直接插入到body元素中，body是他们的直接父级，在TestCode2这个例子中，body是#boxme的直接父级），使用jquery的on方法绑定给这些DOM元素的事件，安卓可以响应，但苹果不可以响应。
TestCode3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30" onclick="createBox()">动态创建DOM元素</div>
<div id="boxme"></div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
$(htmlstr).appendTo("#boxme");
}
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓和苹果都可以响应
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //安卓和苹果都可以响应
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //window首字母大写后，安卓和苹果都可以响应
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓和苹果都可以响应
$("#boxme").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都可以响应
});
</script>
</body>
</html>
TestCode3的测试结果说明：对于JavaScript动态创建的DOM元素及其子元素，如果并不直接插入到body中，而是插入到body中固有存在的其他DOM元素中，使用jquery的on方法绑定给这些DOM元素的事件，安卓和苹果都可以响应。
TestCode4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30">动态创建DOM元素</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '<div id="boxme">';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
htmlstr += '</div>';
var boxme = $(htmlstr).appendTo(".wraper");
boxme.find(".test").each(function(i, e) {
var el = $(e);
el.click(function() {
alert("安卓和苹果都可以点击了");
});
});
return boxme;
}
</script>
</body>
</html>
最后：对于由JavaScript动态并且直接插入body中的DOM元素，兼容安卓和苹果的事件绑定写法是：在动态创建DOM以后，逐个给创建的DOM对象绑定事件。
另外，还在网上看到以下办法：（未亲自测试，待测）
将h5页面放到ios客户端加载操作的时候，发现用jquery绑定的节点事件都是失效的。
解决办法有下面的四种方式：
1、将 click 事件直接绑定到目标元素（即 .target）上
2、将目标元素换成 <a> 或者 button 等可点击的元素
3、将 click 事件委托到非 document 或 body 的父级元素上
4、给目标元素加一条样式规则 cursor: pointer;
推荐后两种。从解决办法来看，推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
更新于2018-12-24
1、当元素是用ajax添加进来的，绑定事件可以使用$(document).('click','#a',function(){});
2、当元素是直接页内元素的话，建议使用$('#a').on('click',function(){});