jquery 在非同步載入的元素上繫結事件

2022-03-11 10:31:49 字數 821 閱讀 2324

最近因為工作關係又重新回歸到了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物件上來實現事件繫結,但是沒有效果,然後我換了乙個更近一點的父元素就好了。。。如果你也遇到這樣的問題可以試試改成繫結在比較接近的父元素上。

關於JQuery獲取非同步載入的元素

今天在寫專案的時候,用jquery的時候遇到乙個問題,描述如下 1 我在載入a.html的同時,初始化a.html中的init user,msgnum 方法 var init function user,msgnum msg info click function 在這個方法中,我為 name元素新...

jQuery的AJax非同步載入

主要用到load 方法以及getscript 方法,具體以乙個例子說明 在現有html檔案中載入乙個擬好的片段,以及在片段載入完成之前阻止使用者進一步操作的彈出框。首先是現有html 無任何內容 ajax非同步載入title script script head body html 擬乙個js檔案g...

可以在相同的元素上執行多條jQuery命令的方法

一般來說,我們平時都是在乙個元素上只能使用一條jquery語句.這樣的畫瀏覽器就需要多次查詢出相同的元素,那麼,有沒有一種方法可以使得在乙個元素上同時執行多條jquery命令呢?答案當然是有的,在jquery裡有一種名叫chaining的技術,是允許我們在相同的元素上執行多條jquery命令的.使用...