动态生成的html元素在iphone上点击事件失效

原文链接：https://yq.aliyun.com/articles/638578

2016年9月21日

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

1. .btn-check {

2. cursor: pointer;//重点加上这个属性，解决问题

3. -webkit-tap-highlight-color: transparent;

4. }

5. <div id="parent" class="weui-cell__bd">

6. <button class="weui-btn btn-check btn-active js-pay" title="one">一月</button>

7. <button class="weui-btn btn-check js-pay" title="two">三月</button>

8. <button class="weui-btn btn-check js-pay" title="three">半年</button>

9. <button class="weui-btn btn-check js-pay" title="four">一年</button>

10. </div>

11. $('body').on('click', '.js-pay', function(){

12.  

13. });

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

1. $(function() {

2. FastClick.attach(document.body);

3. });