如果页面中的元素是后期动态添加的时候,要给这些元素添加事件,普通的添加事件方法是无法生效的,必须要使用事件委托的方式来进行事件添加,如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;。