jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例
在進入主題之前,我們先來看一個前臺頁面經(jīng)常用到的功能:點擊頁面輸入框時自動選擇其中文本。
很容易想到利用輸入框的focus事件,當輸入框獲得焦點時,再調(diào)用jQuery的select()方法。
Okay,想法很簡單,邏輯似乎也無錯。具體我們來看一下現(xiàn)實到底能不能實現(xiàn)。
1.頁面構(gòu)造個表單,放上幾個輸入框。代碼看起來是這樣子的。
<form action="/" method="post">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" value=" " />
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" value=" " />
</td>
</tr>
<tr>
<td>Tel.:</td>
<td>
<input type="tel" name="tel" value=" " />
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" value=" " />
</td>
</tr>
<tr>
<td>Birth:</td>
<td>
<input type="datetime" name="birthday" value=" " />
</td>
</tr>
</table>
</form>
出來的界面在Chromium里差不多是這個樣子的:
2.然后開始寫我們的JavaScript代碼來實現(xiàn)單擊選中框內(nèi)的文本,根據(jù)之前的想法,實現(xiàn)起來差不多應(yīng)該是下面這個樣子:
<script type="text/javascript">
$(function () {
$("input").focus(function () {
$(this).select();
})
})
</script>
3.然后再去頁面小試一下,看效果出來沒有。嘗試之后發(fā)現(xiàn),差不多算是成功了一半。什么情況叫?如果此刻你也跟著寫了代碼,你會發(fā)現(xiàn),間單擊輸入框時,框中文本會閃爍。再進一步才會發(fā)現(xiàn),只有當鼠標按下不放,輸入框內(nèi)文本才是保持選中狀態(tài),是我們預(yù)期的。當松開時選擇效果消失。無盡惆悵!
而且這還只是僅僅在Chromium中的情況,在IE中更為奇葩,連一丁點選擇的效果都沒有綻放出來。直接把代碼無視了。

對于火狐,水壺(如果你還不知道它的存在的話:火狐近親,Mozilla 官方承認的64位高效版本火狐變種版本)我已經(jīng)無力去測了。
下面直接給出經(jīng)過Google之后找到的能在全瀏覽器中工作的代碼:
<script type="text/javascript">
$(function () {
$("input").focus(function () {
var input = $(this);
setTimeout(function () {
input.select();
});
})
})
</script>
而關(guān)于上面這段能夠正常工作的代碼,還有一點神奇之處。那就是我和大家可能都覺得
var input = $(this);
setTimeout(function () {
input.select();
});
與
var input =$(this);
setTimeout(function () {
$(this).select();
});
這兩種寫法應(yīng)該是完全一樣的代碼吧,所以后者也應(yīng)該能夠達到預(yù)期的效果才對。但事實上換成第二種后,效果不見了!根本無法讓文本自動選中!!
這是一般人所無法理解的高度。
Okay,回歸繼續(xù)看我們的輸入框現(xiàn)在怎么樣了?,F(xiàn)在只要輸入框中有文本,隨便點一下就自動選中且松開鼠標后不反彈。很好,要的就是這種效果。
下面,才是本文的真正主題,如何將特性,或者說事件處理器,綁定到動態(tài)創(chuàng)建的頁面元素上。
接著上面這個功能講。上面的代碼也許解決了一個表單頁面的需求,在且僅僅是在這個頁面,輸入框具備這種獲得焦點后自動將文本選中的特性?;蛘哒f擁有我們代碼中所綁定到輸入框focus事件上的處理器,當然,這個處理器就是選擇文本。
如果說上面的說法有點令人頭暈找不到北,下面我將用平生最為直白的語言再次闡述同一觀點:假如其他頁面也有輸入框,是不是每個頁面都去寫一段相同的代碼來實現(xiàn)這樣的效果。
或者說同樣是在當前頁面,當用戶填完相應(yīng)資料后,我們再動態(tài)生成一些輸入框,而這些后來生成的輸入框如何也擁有獲得焦點選中文本的功能。
為了演示,我們檢測如果用戶輸入了Name,我們再在下面創(chuàng)建一個輸入框可以輸入昵稱。可以預(yù)見得到,這個后來通過JavaScript代碼插入到DOM中的輸入框其中不會有其他輸入框一樣的效果的。因為我們使文本自動被選中的代碼是在頁面加載時執(zhí)行的,而頁面加載時這個后來插入的輸入框還不存在呢。
下面是新加的對name輸入框監(jiān)聽的代碼:
$("input[name='name']").change(function () {
$("tr").first().append(' <tr>' +
'<td>Nick name:</td>'+
'<td>'+
'<input type="text" name="nickname" value=" " />'+
'</td>'+
'</tr>')
})
下面到頁面去測試一下,在Name中隨便輸入點什么吧。并且測試生成的輸入框是不能將文本自動選中的。

下面給出使動態(tài)創(chuàng)建的元素得到之前綁定的事件處理器的方法:
$("body").on('focus', "input", function () {
var input = $(this);
setTimeout(function () {
input.select();
});
});
這個方法未免有點取巧,但也是我覺得目前為止所知道的比較好的辦法。因為jQuery1.9之前其實是有個live()函數(shù)專門來做這樣類似的工作的,它可以將事件處理器綁定到未來未還未被創(chuàng)建的元素身上,但后來隨著jQuery版本的升級,不提倡用這個live()方法了。既然不提倡了,自然有它的理由我也就不細究了,就像之前我細究了一下jQuery為什么廢除了檢測瀏覽器相關(guān)的函數(shù)一樣。
如果我們將上面的方法寫到網(wǎng)站的母版頁當中,那么就不必在每個有輸入框的頁面都寫相同的代碼來實現(xiàn)了,同時對于后來動態(tài)創(chuàng)建的元素也都應(yīng)用上了效果。
上面關(guān)于輸入框的例子只是為了演示,當然不局限于這個例子,這樣處理動態(tài)創(chuàng)建元素的需求還是很常見的,至少我在項目中都遇到過幾次了,在不同的情形下。比如在呈現(xiàn)給權(quán)限不夠的用戶的頁面中,有些按扭需要禁用,但用戶是可以點擊添加來增加一行,而每行都會有刪除修改按扭,這時候可以將disable應(yīng)用到一個表格中新增加的行中的按扭上。
行到水窮處,坐看云起時
相關(guān)文章
jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼,涉及jQuery針對頁面元素動態(tài)操作及響應(yīng)鼠標事件動態(tài)修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能
這篇文章主要介紹了jQuery progressbar通過Ajax請求實現(xiàn)后臺進度實時功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
jQuery實現(xiàn)類似淘寶購物車全選狀態(tài)示例
今天寫了個類似淘寶購物車全選狀態(tài),看下截圖,效果還不錯吧,具體的實現(xiàn)html及jQuery代碼如下,感興趣的朋友可以參考下哈2013-06-06
jQuery實現(xiàn)的省市聯(lián)動菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的省市聯(lián)動菜單功能,結(jié)合完整實例形式分析了jQuery實現(xiàn)級聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡單實用,需要的朋友可以參考下2017-01-01

