动态添加元素绑定事件在IOS失效

本文探讨了在动态添加元素的场景下,如何通过事件委托处理click事件,特别是在iOS设备上的特殊处理方式,包括使用cursor:pointer样式修复bug。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果页面中的元素是后期动态添加的时候,要给这些元素添加事件,普通的添加事件方法是无法生效的,必须要使用事件委托的方式来进行事件添加,如delegate()或on()
这两种方法都是由父元素或祖元素来调用的。

$("body").delegate("要绑定事件的元素","事件类型","事件处理函数")
$("body").on("事件类型","要绑定事件的元素","事件处理函数")

对于事件委托的方式,andriod上没有问题,但是在IOS上有时会出现问题,绑定的事件不生效。此时在你绑定事件元素的样式中添加 cursor:pointer 后 IOS问题解决

.box的元素是后期动态添加的
$("body").on("click", ".box", function () {
        var url = $(this).find("img").attr("src");
        $(".previewImg").attr("src", url);
        $(".preview").fadeIn();
        $("body").css("overflow","hidden");
})
.box { cursor:pointer; }

对于IOS中的bug:
当使用事件委托给【目标元素】添加 click 事件时,如果【代理元素】是 document或body,并且【目标元素】是默认不可点击的(如 div, span 等),此时click事件会失效。如果【目标元素】是可点击的(比如 button、a 标签),此时click事件还是有效的。

1、【代理元素】可以是【目标元素】的父级元素,document,body等,但【目标元素】必须为a或者button可点击的标签。

2、【代理元素】必须是【目标元素】的非document,body父级元素,【目标元素】可以是任意标签。
将click事件委托到非document或body的父级元素上。

3、【代理元素】可以是【目标元素】的父级元素,document,body等,【目标元素】可以是任意标签,但是要设置cursor: pointer;。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值