我们在项目中会遇到给动态插入的元素绑定点击事件,我们通常给元素绑定事件一般是这样做得
//原生方法
$(ele).on("click",function(){
console.log(222);
})
一般这样做就行了,但是动态插入的元素,普通的点击事件会因为获取不到dom元素而致使点击失效, 我们这样是找不到ele这个东西的。那怎么办的,我们可以用这样的绑定方式,利用事件托管:
$(document).on("click","ele",function(){
console.log(111);
})
通过事件托管可以获取到动态生成的dom节点,解决问题。
ok,这样在Android+pc是没有问题的,但是在ios不支持这样的写法,是为什么呢?
在ios系统中,例如document,div,body这些本身并没有可以被点击的属性的元素不能作为托管点击事件的父元素。所以,用这样的方法进行事件托管,ios会获取不到你的document的点击事件,自然无法获取到你想要绑定的元素身上。
解决办法就是把document换成你想要绑定元素的父元素上可以是最大的那个div,然后在最大元素的样式中加入cursor:pointer; 这个属性可以让父元素变成拥有可被点击属性的盒子,这样就可以解决动态数据无法绑定事件的问题。
<!--这个位置设置一个属性 cursor: pointer;-->
<div class='wrap' style='cursor: pointer'><div>//这是父级元素
<script>
$("wrap").on('click','ele',function(){
console.log(1111);
})
</script>
这样就可以给未来元素绑定事件并且兼容ios了。
网友评论