天天看點

jQuery 綁定事件到動态建立的元素上

在進入主題之前,我們先來看一個前台頁面經常用到的功能:點選頁面輸入框時自動選擇其中文本。

很容易想到利用輸入框的focus事件,當輸入框獲得焦點時,再調用jQuery的select()方法。

Okay,想法很簡單,邏輯似乎也無錯。具體我們來看一下現實到底能不能實作。

1.頁面構造個表單,放上幾個輸入框。代碼看起來是這樣子的。

出來的界面在Chromium裡差不多是這個樣子的:

jQuery 綁定事件到動态建立的元素上

2.然後開始寫我們的JavaScript代碼來實作單擊選中框内的文本,根據之前的想法,實作起來差不多應該是下面這個樣子:

3.然後再去頁面小試一下,看效果出來沒有。嘗試之後發現,差不多算是成功了一半。什麼情況叫?如果此刻你也跟着寫了代碼,你會發現,間單擊輸入框時,框中文本會閃爍。再進一步才會發現,隻有當滑鼠按下不放,輸入框内文本才是保持選中狀态,是我們預期的。當松開時選擇效果消失。無盡惆怅!

jQuery 綁定事件到動态建立的元素上

而且這還隻是僅僅在Chromium中的情況,在IE中更為奇葩,連一丁點選擇的效果都沒有綻放出來。直接把代碼無視了。

jQuery 綁定事件到動态建立的元素上

下面直接給出經過Google之後找到的能在全浏覽器中工作的代碼:

而關于上面這段能夠正常工作的代碼,還有一點神奇之處。那就是我和大家可能都覺得

這兩種寫法應該是完全一樣的代碼吧,是以後者也應該能夠達到預期的效果才對。但事實上換成第二種後,效果不見了!根本無法讓文本自動選中!!

這是一般人所無法了解的高度。

Okay,回歸繼續看我們的輸入框現在怎麼樣了。現在隻要輸入框中有文本,随便點一下就自動選中且松開滑鼠後不反彈。很好,要的就是這種效果。

下面,才是本文的真正主題,如何将特性,或者說事件處理器,綁定到動态建立的頁面元素上。

接着上面這個功能講。上面的代碼也許解決了一個表單頁面的需求,在且僅僅是在這個頁面,輸入框具備這種獲得焦點後自動将文本選中的特性。或者說擁有我們代碼中所綁定到輸入框focus事件上的處理器,當然,這個處理器就是選擇文本。

如果說上面的說法有點令人頭暈找不到北,下面我将用平生最為直白的語言再次闡述同一觀點:假如其他頁面也有輸入框,是不是每個頁面都去寫一段相同的代碼來實作這樣的效果。

或者說同樣是在目前頁面,當使用者填完相應資料後,我們再動态生成一些輸入框,而這些後來生成的輸入框如何也擁有獲得焦點選中文本的功能。

為了示範,我們檢測如果使用者輸入了Name,我們再在下面建立一個輸入框可以輸入昵稱。可以預見得到,這個後來通過JavaScript代碼插入到DOM中的輸入框其中不會有其他輸入框一樣的效果的。因為我們使文本自動被選中的代碼是在頁面加載時執行的,而頁面加載時這個後來插入的輸入框還不存在呢。

下面是新加的對name輸入框監聽的代碼:

下面到頁面去測試一下,在Name中随便輸入點什麼吧。并且測試生成的輸入框是不能将文本自動選中的。

jQuery 綁定事件到動态建立的元素上

下面給出使動态建立的元素得到之前綁定的事件處理器的方法:

如果我們将上面的方法寫到網站的母版頁當中,那麼就不必在每個有輸入框的頁面都寫相同的代碼來實作了,同時對于後來動态建立的元素也都應用上了效果。

上面關于輸入框的例子隻是為了示範,當然不局限于這個例子,這樣處理動态建立元素的需求還是很常見的,至少我在項目中都遇到過幾次了,在不同的情形下。比如在呈現給權限不夠的使用者的頁面中,有些按扭需要禁用,但使用者是可以點選添加來增加一行,而每行都會有删除修改按扭,這時候可以将disable應用到一個表格中新增加的行中的按扭上。

繼續閱讀