前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

live事件在部分手机中失效的解决方案

移动端
在开发过程中难免会到弹窗,弹窗之后的按钮又会执行一些事件方法。开发的场景如下:

蓝色弹窗是事件中追加的,在追加的元素中有一个“确认捐赠”按钮,在这里执行事件方法,如果直接写在元素上绑定事件是没有问题,如果不是绑定在元素上,这个时候一般都会用live事件来写,经测试的时候部分手机不兼容,如ios 4s,通过搜索网上代码可以通过如下代码解决:

  $(document).on('click', ".dialog-btn", function(){
        alert(1)
   })

还说比live更高效,于是很开心的交接给了后台,后台开发集成环境,测试发现不行,杯崔了....
 
分析DOM元素,在前端测试中没有问题,按钮的写法如下:

<a href="javascript:;" class="dialog-btn">确认捐赠</a>

后台人员此处的写法如下:

<a class="dialog-btn">确认捐赠</a>

觉得也没啥毛病,事件也没啥问题,测试了半天,换标签也不行,最后还是还原成a标签,随便补了下href="javascript:;",居然成功了!!!


总结:

追加元素事件方法的绑定用on方法,用元素的父级如“body",document来绑定,在参数中多加上当前要执行的元素,意思是从当前父级找到当前的元素来执行事件。此元素的标签用a标签,且要加上herf="javascript:;"

希望可以帮到踩坑的童子们!!!



转载请注明:前端录»live事件在部分手机中失效的解决方案