事件委托的应用及其兼容

最近在项目中遇到一个问题：

优惠券通过异步调用后台接口生成，其中有一个点击交互，点击查看详情会出现优惠券详情，内容如下

默认情况

点击展开后是这样

乍一看简直so easy，直接给这个dom绑定一个点击事件就ok了，

$(".act-body-body").click(function(){

      $(this).toggleClass('show').parents('.act-body').next().slideToggle();

})

呵呵，so naive，意料之外又情理之中地失效了，懵逼了一会才反应过来，绑定点击事件在优惠券渲染之前进行了，导致这个绑定失效。

而目前的项目也没有用vue等一系列框架来维护，完全是原生js+少量jq，思量一番后我决定用事件委托来实现这个功能。

---

事件委托是什么意思呢？JavaScript高级程序设计上讲：

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

也就是说，我们可以利用事件委托这个特性来绑定target的父级事件，通过父级点击事件的冒泡特性来触发到目标元素的点击事件。

所以我直接把点击事件绑定到了document，通过document来委托代理这个点击事件：

$(".document").on('click','.act-body-body',function () {

     $(this).toggleClass('show').parents('.act-body').next().slideToggle();

});

结果在网页测试没有问题，但在用ios手机测试打开仍然失效，后来经过排查，发现ios系统使用事件委托时，必须要绑定在其直接父级上，否则不会生效，因此我把ducument改为其直接父级，这个问题完美解决。

比较有代表性的兼容性问题，记录一下。