jQuery 綁定事件到動(dòng)態(tài)創(chuàng)建的元素上的方法實(shí)例

更新時(shí)間：2013年08月18日 17:40:30 作者：

這篇文章介紹了jQuery 綁定事件到動(dòng)態(tài)創(chuàng)建的元素上的方法實(shí)例，有需要的朋友可以參考一下

在進(jìn)入主題之前，我們先來看一個(gè)前臺(tái)頁面經(jīng)常用到的功能：點(diǎn)擊頁面輸入框時(shí)自動(dòng)選擇其中文本。

很容易想到利用輸入框的focus事件，當(dāng)輸入框獲得焦點(diǎn)時(shí)，再調(diào)用jQuery的select()方法。

Okay，想法很簡單，邏輯似乎也無錯(cuò)。具體我們來看一下現(xiàn)實(shí)到底能不能實(shí)現(xiàn)。

1.頁面構(gòu)造個(gè)表單，放上幾個(gè)輸入框。代碼看起來是這樣子的。

復(fù)制代碼代碼如下:

<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里差不多是這個(gè)樣子的：

2.然后開始寫我們的JavaScript代碼來實(shí)現(xiàn)單擊選中框內(nèi)的文本，根據(jù)之前的想法，實(shí)現(xiàn)起來差不多應(yīng)該是下面這個(gè)樣子：

復(fù)制代碼代碼如下:

<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                $(this).select();
            })
        })
  </script>

3.然后再去頁面小試一下，看效果出來沒有。嘗試之后發(fā)現(xiàn)，差不多算是成功了一半。什么情況叫？如果此刻你也跟著寫了代碼，你會(huì)發(fā)現(xiàn)，間單擊輸入框時(shí)，框中文本會(huì)閃爍。再進(jìn)一步才會(huì)發(fā)現(xiàn)，只有當(dāng)鼠標(biāo)按下不放，輸入框內(nèi)文本才是保持選中狀態(tài)，是我們預(yù)期的。當(dāng)松開時(shí)選擇效果消失。無盡惆悵！

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

對(duì)于火狐，水壺（如果你還不知道它的存在的話：火狐近親，Mozilla 官方承認(rèn)的64位高效版本火狐變種版本）我已經(jīng)無力去測(cè)了。

下面直接給出經(jīng)過Google之后找到的能在全瀏覽器中工作的代碼：

復(fù)制代碼代碼如下:

<script type="text/javascript">
        $(function () {
            $("input").focus(function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            })
        })
 </script>

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

復(fù)制代碼代碼如下:

var input = $(this);
                setTimeout(function () {
                    input.select();
                });

與

復(fù)制代碼代碼如下:

                var input =$(this);
                setTimeout(function () {
                    $(this).select();
                });

這兩種寫法應(yīng)該是完全一樣的代碼吧，所以后者也應(yīng)該能夠達(dá)到預(yù)期的效果才對(duì)。但事實(shí)上換成第二種后，效果不見了！根本無法讓文本自動(dòng)選中！！

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

Okay，回歸繼續(xù)看我們的輸入框現(xiàn)在怎么樣了?，F(xiàn)在只要輸入框中有文本，隨便點(diǎn)一下就自動(dòng)選中且松開鼠標(biāo)后不反彈。很好，要的就是這種效果。

下面，才是本文的真正主題，如何將特性，或者說事件處理器，綁定到動(dòng)態(tài)創(chuàng)建的頁面元素上。

接著上面這個(gè)功能講。上面的代碼也許解決了一個(gè)表單頁面的需求，在且僅僅是在這個(gè)頁面，輸入框具備這種獲得焦點(diǎn)后自動(dòng)將文本選中的特性?；蛘哒f擁有我們代碼中所綁定到輸入框focus事件上的處理器，當(dāng)然，這個(gè)處理器就是選擇文本。

如果說上面的說法有點(diǎn)令人頭暈找不到北，下面我將用平生最為直白的語言再次闡述同一觀點(diǎn)：假如其他頁面也有輸入框，是不是每個(gè)頁面都去寫一段相同的代碼來實(shí)現(xiàn)這樣的效果。

或者說同樣是在當(dāng)前頁面，當(dāng)用戶填完相應(yīng)資料后，我們?cè)賱?dòng)態(tài)生成一些輸入框，而這些后來生成的輸入框如何也擁有獲得焦點(diǎn)選中文本的功能。

為了演示，我們檢測(cè)如果用戶輸入了Name，我們?cè)僭谙旅鎰?chuàng)建一個(gè)輸入框可以輸入昵稱?？梢灶A(yù)見得到，這個(gè)后來通過JavaScript代碼插入到DOM中的輸入框其中不會(huì)有其他輸入框一樣的效果的。因?yàn)槲覀兪刮谋咀詣?dòng)被選中的代碼是在頁面加載時(shí)執(zhí)行的，而頁面加載時(shí)這個(gè)后來插入的輸入框還不存在呢。

下面是新加的對(duì)name輸入框監(jiān)聽的代碼：

復(fù)制代碼代碼如下:

$("input[name='name']").change(function () {
                $("tr").first().append(' <tr>' +
                                          '<td>Nick name:</td>'+
                                           '<td>'+
                                                '<input type="text" name="nickname" value=" " />'+
                                           '</td>'+
                                        '</tr>')
            })

下面到頁面去測(cè)試一下，在Name中隨便輸入點(diǎn)什么吧。并且測(cè)試生成的輸入框是不能將文本自動(dòng)選中的。

下面給出使動(dòng)態(tài)創(chuàng)建的元素得到之前綁定的事件處理器的方法：

復(fù)制代碼代碼如下:

$("body").on('focus', "input", function () {
                var input = $(this);
                setTimeout(function () {
                    input.select();
                });
            });

這個(gè)方法未免有點(diǎn)取巧，但也是我覺得目前為止所知道的比較好的辦法。因?yàn)閖Query1.9之前其實(shí)是有個(gè)live()函數(shù)專門來做這樣類似的工作的，它可以將事件處理器綁定到未來未還未被創(chuàng)建的元素身上，但后來隨著jQuery版本的升級(jí)，不提倡用這個(gè)live()方法了。既然不提倡了，自然有它的理由我也就不細(xì)究了，就像之前我細(xì)究了一下jQuery為什么廢除了檢測(cè)瀏覽器相關(guān)的函數(shù)一樣。

如果我們將上面的方法寫到網(wǎng)站的母版頁當(dāng)中，那么就不必在每個(gè)有輸入框的頁面都寫相同的代碼來實(shí)現(xiàn)了，同時(shí)對(duì)于后來動(dòng)態(tài)創(chuàng)建的元素也都應(yīng)用上了效果。

上面關(guān)于輸入框的例子只是為了演示，當(dāng)然不局限于這個(gè)例子，這樣處理動(dòng)態(tài)創(chuàng)建元素的需求還是很常見的，至少我在項(xiàng)目中都遇到過幾次了,在不同的情形下。比如在呈現(xiàn)給權(quán)限不夠的用戶的頁面中，有些按扭需要禁用，但用戶是可以點(diǎn)擊添加來增加一行，而每行都會(huì)有刪除修改按扭，這時(shí)候可以將disable應(yīng)用到一個(gè)表格中新增加的行中的按扭上。

行到水窮處，坐看云起時(shí)

您可能感興趣的文章: