jQuery 綁定事件到動(dòng)態(tài)創(chuàng)建的元素上的方法實(shí)例
在進(jìn)入主題之前，我們先來(lái)看一個(gè)前臺(tái)頁(yè)面經(jīng)常用到的功能：點(diǎn)擊頁(yè)面輸入框時(shí)自動(dòng)選擇其中文本。
很容易想到利用輸入框的focus事件，當(dāng)輸入框獲得焦點(diǎn)時(shí)，再調(diào)用jQuery的select()方法。
Okay，想法很簡(jiǎn)單，邏輯似乎也無(wú)錯(cuò)。具體我們來(lái)看一下現(xiàn)實(shí)到底能不能實(shí)現(xiàn)。
1.頁(yè)面構(gòu)造個(gè)表單，放上幾個(gè)輸入框。代碼看起來(lái)是這樣子的。
<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>
出來(lái)的界面在Chromium里差不多是這個(gè)樣子的：
2.然后開(kāi)始寫(xiě)我們的JavaScript代碼來(lái)實(shí)現(xiàn)單擊選中框內(nèi)的文本，根據(jù)之前的想法，實(shí)現(xiàn)起來(lái)差不多應(yīng)該是下面這個(gè)樣子：
<script type="text/javascript">
$(function () {
$("input").focus(function () {
$(this).select();
})
})
</script>
3.然后再去頁(yè)面小試一下，看效果出來(lái)沒(méi)有。嘗試之后發(fā)現(xiàn)，差不多算是成功了一半。什么情況叫？如果此刻你也跟著寫(xiě)了代碼，你會(huì)發(fā)現(xiàn)，間單擊輸入框時(shí)，框中文本會(huì)閃爍。再進(jìn)一步才會(huì)發(fā)現(xiàn)，只有當(dāng)鼠標(biāo)按下不放，輸入框內(nèi)文本才是保持選中狀態(tài)，是我們預(yù)期的。當(dāng)松開(kāi)時(shí)選擇效果消失。無(wú)盡惆悵！
而且這還只是僅僅在Chromium中的情況，在IE中更為奇葩，連一丁點(diǎn)選擇的效果都沒(méi)有綻放出來(lái)。直接把代碼無(wú)視了。
對(duì)于火狐，水壺（如果你還不知道它的存在的話：火狐近親，Mozilla 官方承認(rèn)的64位高效版本火狐變種版本）我已經(jīng)無(wú)力去測(cè)了。
下面直接給出經(jīng)過(guò)Google之后找到的能在全瀏覽器中工作的代碼：
<script type="text/javascript">
$(function () {
$("input").focus(function () {
var input = $(this);
setTimeout(function () {
input.select();
});
})
})
</script>
而關(guān)于上面這段能夠正常工作的代碼，還有一點(diǎn)神奇之處。那就是我和大家可能都覺(jué)得
var input = $(this);
setTimeout(function () {
input.select();
});
與
var input =$(this);
setTimeout(function () {
$(this).select();
});
這兩種寫(xiě)法應(yīng)該是完全一樣的代碼吧，所以后者也應(yīng)該能夠達(dá)到預(yù)期的效果才對(duì)。但事實(shí)上換成第二種后，效果不見(jiàn)了！根本無(wú)法讓文本自動(dòng)選中！！
這是一般人所無(wú)法理解的高度。
Okay，回歸繼續(xù)看我們的輸入框現(xiàn)在怎么樣了?，F(xiàn)在只要輸入框中有文本，隨便點(diǎn)一下就自動(dòng)選中且松開(kāi)鼠標(biāo)后不反彈。很好，要的就是這種效果。
下面，才是本文的真正主題，如何將特性，或者說(shuō)事件處理器，綁定到動(dòng)態(tài)創(chuàng)建的頁(yè)面元素上。
接著上面這個(gè)功能講。上面的代碼也許解決了一個(gè)表單頁(yè)面的需求，在且僅僅是在這個(gè)頁(yè)面，輸入框具備這種獲得焦點(diǎn)后自動(dòng)將文本選中的特性?；蛘哒f(shuō)擁有我們代碼中所綁定到輸入框focus事件上的處理器，當(dāng)然，這個(gè)處理器就是選擇文本。
如果說(shuō)上面的說(shuō)法有點(diǎn)令人頭暈找不到北，下面我將用平生最為直白的語(yǔ)言再次闡述同一觀點(diǎn)：假如其他頁(yè)面也有輸入框，是不是每個(gè)頁(yè)面都去寫(xiě)一段相同的代碼來(lái)實(shí)現(xiàn)這樣的效果。
或者說(shuō)同樣是在當(dāng)前頁(yè)面，當(dāng)用戶填完相應(yīng)資料后，我們?cè)賱?dòng)態(tài)生成一些輸入框，而這些后來(lái)生成的輸入框如何也擁有獲得焦點(diǎn)選中文本的功能。
為了演示，我們檢測(cè)如果用戶輸入了Name，我們?cè)僭谙旅鎰?chuàng)建一個(gè)輸入框可以輸入昵稱?？梢灶A(yù)見(jiàn)得到，這個(gè)后來(lái)通過(guò)JavaScript代碼插入到DOM中的輸入框其中不會(huì)有其他輸入框一樣的效果的。因?yàn)槲覀兪刮谋咀詣?dòng)被選中的代碼是在頁(yè)面加載時(shí)執(zhí)行的，而頁(yè)面加載時(shí)這個(gè)后來(lái)插入的輸入框還不存在呢。
下面是新加的對(duì)name輸入框監(jiān)聽(tīng)的代碼：
$("input[name='name']").change(function () {
$("tr").first().append(' <tr>' +
'<td>Nick name:</td>'+
'<td>'+
'<input type="text" name="nickname" value=" " />'+
'</td>'+
'</tr>')
})
下面到頁(yè)面去測(cè)試一下，在Name中隨便輸入點(diǎn)什么吧。并且測(cè)試生成的輸入框是不能將文本自動(dòng)選中的。
下面給出使動(dòng)態(tài)創(chuàng)建的元素得到之前綁定的事件處理器的方法：
$("body").on('focus', "input", function () {
var input = $(this);
setTimeout(function () {
input.select();
});
});
這個(gè)方法未免有點(diǎn)取巧，但也是我覺(jué)得目前為止所知道的比較好的辦法。因?yàn)閖Query1.9之前其實(shí)是有個(gè)live()函數(shù)專門(mén)來(lái)做這樣類似的工作的，它可以將事件處理器綁定到未來(lái)未還未被創(chuàng)建的元素身上，但后來(lái)隨著jQuery版本的升級(jí)，不提倡用這個(gè)live()方法了。既然不提倡了，自然有它的理由我也就不細(xì)究了，就像之前我細(xì)究了一下jQuery為什么廢除了檢測(cè)瀏覽器相關(guān)的函數(shù)一樣。
如果我們將上面的方法寫(xiě)到網(wǎng)站的母版頁(yè)當(dāng)中，那么就不必在每個(gè)有輸入框的頁(yè)面都寫(xiě)相同的代碼來(lái)實(shí)現(xiàn)了，同時(shí)對(duì)于后來(lái)動(dòng)態(tài)創(chuàng)建的元素也都應(yīng)用上了效果。
上面關(guān)于輸入框的例子只是為了演示，當(dāng)然不局限于這個(gè)例子，這樣處理動(dòng)態(tài)創(chuàng)建元素的需求還是很常見(jiàn)的，至少我在項(xiàng)目中都遇到過(guò)幾次了,在不同的情形下。比如在呈現(xiàn)給權(quán)限不夠的用戶的頁(yè)面中，有些按扭需要禁用，但用戶是可以點(diǎn)擊添加來(lái)增加一行，而每行都會(huì)有刪除修改按扭，這時(shí)候可以將disable應(yīng)用到一個(gè)表格中新增加的行中的按扭上。
行到水窮處，坐看云起時(shí)
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
- jquery html動(dòng)態(tài)添加的元素綁定事件詳解
- jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
- jQuery頁(yè)面元素動(dòng)態(tài)添加后綁定事件丟失方法,非 live
- 淺談Jquery為元素綁定事件
- 解決jquery appaend元素中id綁定事件失效的問(wèn)題
- jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件實(shí)例分析
- jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析
相關(guān)文章
jquery是javascript的類庫(kù)，提供了大量的javascript的類庫(kù)和API，方便javascript開(kāi)發(fā)。2010-04-04
對(duì)稱加密與非對(duì)稱加密優(yōu)缺點(diǎn)詳解
本文主要介紹了對(duì)稱加密與非對(duì)稱加密的優(yōu)缺點(diǎn)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jquery toggle點(diǎn)擊實(shí)現(xiàn)內(nèi)容的顯示效果，喜歡的朋友可以參考下。2010-05-05
jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼,涉及jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery實(shí)現(xiàn)類似淘寶購(gòu)物車全選狀態(tài)示例
今天寫(xiě)了個(gè)類似淘寶購(gòu)物車全選狀態(tài)，看下截圖，效果還不錯(cuò)吧，具體的實(shí)現(xiàn)html及jQuery代碼如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-01-01
JQuery中ajax方法訪問(wèn)web服務(wù)實(shí)例
這篇文章主要介紹了JQuery中ajax方法訪問(wèn)web服務(wù)的方法,實(shí)例分析了jquery中Ajax方法結(jié)合asp.net程序處理web訪問(wèn)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jQuery實(shí)現(xiàn)王者榮耀手風(fēng)琴效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)王者榮耀手風(fēng)琴效果的代碼內(nèi)容，需要的朋友們可以學(xué)習(xí)下。2020-01-01