動態生成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);
});