最近在項目中遇到一個問題：

優(yōu)惠券通過異步調用后臺接口生成，其中有一個點擊交互，點擊查看詳情會出現(xiàn)優(yōu)惠券詳情，內容如下

默認情況

點擊展開后是這樣

乍一看簡直so easy，直接給這個dom綁定一個點擊事件就ok了，

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

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

})

呵呵，so naive，意料之外又情理之中地失效了，懵逼了一會才反應過來，綁定點擊事件在優(yōu)惠券渲染之前進行了，導致這個綁定失效。

而目前的項目也沒有用vue等一系列框架來維護，完全是原生js+少量jq，思量一番后我決定用事件委托來實現(xiàn)這個功能。

事件委托是什么意思呢？JavaScript高級程序設計上講：

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

也就是說，我們可以利用事件委托這個特性來綁定target的父級事件，通過父級點擊事件的冒泡特性來觸發(fā)到目標元素的點擊事件。

所以我直接把點擊事件綁定到了document，通過document來委托代理這個點擊事件：

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

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

});

結果在網(wǎng)頁測試沒有問題，但在用ios手機測試打開仍然失效，后來經(jīng)過排查，發(fā)現(xiàn)ios系統(tǒng)使用事件委托時，必須要綁定在其直接父級上，否則不會生效，因此我把ducument改為其直接父級，這個問題完美解決。

比較有代表性的兼容性問題，記錄一下。