最近因為工作關系又重新回歸到了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對象上來實現事件綁定,但是沒有效果,然后我換了一個更近一點的父元素就好了。。。如果你也遇到這樣的問題可以試試改成綁定在比較接近的父元素上。
以上純屬個人意見,希望大家發現有問題的可以給我指點,也歡迎大家來互相交流。