【jquery】 在異步加載的元素上綁定事件

最近由於工做關係又從新迴歸到了jquery的懷抱，發現不少jquery的一些細節處理的部分都忘記了。這裏記錄一下最近在作項目時頻繁遇到的一個問題：給異步加載的元素添加事件綁定。

問題發生的前提是項目前端開發使用了jquery 和 artTemplate技術，其中常常要經過artTemplate的template.compile()方法來實現像是向下滾動鼠標動態加載後續分頁的內容並顯示在頁面上這樣的效果。

在jquery官網上關於事件綁定和事件委託的4個方法中有這樣的介紹：

live()：jQuery1.7以後棄用
bind(): 動態添加的元素沒法使用該方法綁定事件
delegate():jQuery1.7以後被on()取代
on()： jQuery1.7以後引入，支持事件綁定的所有功能

從這裏能夠看出咱們正常狀況下使用的就是bind()或者on()了，而bind()沒法實如今動態添加的元素上綁定事件，那麼咱們平時使用頻率很高的$('xx').click(function(){...})也是不適用的。因此要實如今異步加載的元素上添加事件綁定須要使用on()方法。

通常來講能夠直接綁定在document對象上，如$(document).on('click','xx',function(){...})這樣的語法。$(...)中的元素須要是真正綁定的元素'xx'的父級或者body上。當事件直接發生在綁定的元素上時，該程序不會被調用。

另外，我在另外一個項目也是用了像這樣的直接把事件委託在document對象上來實現事件綁定，可是沒有效果，而後我換了一個更近一點的父元素就行了。。。若是你也遇到這樣的問題能夠試試改爲綁定在比較接近的父元素上。

以上純屬我的意見，但願你們發現有問題的能夠給我指點，也歡迎你們來互相交流。