动态生成html元素绑定事件 iphone失效问题解决

2016年9月21日

动态生成html元素绑定事件 iphone上失效问题解决。多种方法，简单写几种。
第一种、使用touchstart或者touchend代替click事件。触屏事件问题，如果触发了touchmove，touchend就不会被触发了,而且touchmove没有持续触发。在touchstart的时候调用下event.preventDefault(); 阻止冒泡事件，即可让其他事件都正常被触发。
第二种、将事件直接写到dom的onclick上，可以成功调用。onclick=""
第三种、safari认为添加css属性cursor: pointer;才是可点击区域，IOS认定只有可点击的DOM对象才可以触发点击事件，比如a、button标签，对于非点击对象，需要将其变为可点击对象；

.btn-check {
    cursor: pointer;//重点加上这个属性，解决问题
    -webkit-tap-highlight-color: transparent;
}
<div id="parent" class="weui-cell__bd">
    <button class="weui-btn btn-check btn-active js-pay" title="one">一月</button>
    <button class="weui-btn btn-check js-pay" title="two">三月</button>
    <button class="weui-btn btn-check js-pay" title="three">半年</button>
    <button class="weui-btn btn-check js-pay" title="four">一年</button>
</div>
$('body').on('click', '.js-pay', function(){

});

第四种、引入fastclick.js，页面初始化，解决IOS点击失效、点透、延时300毫秒的问题

$(function() {
    FastClick.attach(document.body);
});