JS delegate與live淺析

更新時間：2013年12月21日 14:51:27 作者：

這篇文章主要介紹了JS delegate與live，有需要的朋友可以參考一下

在jquery里有兩個方法可以用來綁定自動追加出來的ＤＯＭ對象，它們是live和delegate，事實上，這兩個方法是bind方法的一個變體，在對于固定ＤＯＭ對象時，我們通常使用bind就可以了，而對象動態(tài)產(chǎn)生的ＤＯＭ對象，使用bind就無能為力了，這時live和delegate就出場了，呵呵。

live方法，用來綁定某個（某類）對象，為它們綁定方法

復制代碼代碼如下:

　　　　　   //live
            $("td").live("click", function () {
                alert($(this).html());
            });
          　//下面也是可以的           $("#list td").live("click", function () { 
                 alert($(this).html()); 
           });

delegate方法，用來綁定某個（某類）對象下的子對象，為子對象綁定方法（委托子對象，讓子對象有某種方法，呵呵）

復制代碼代碼如下:

 $("#list").delegate("td", "click", function () {
                alert($(this).html());
            });

下面的ＤＥＭＯ的完成代碼：

復制代碼代碼如下:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script id="listTemplate" type="text/html">
        <tr>
            <td>[UserID]</td>
            <td>[UserImg]</td>
            <td>[UserName]</td>
        </tr>
    </script>
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分別用于指定區(qū)分大小寫的匹配、全局匹配和多行匹配。

        $(function () {
            //live
            $("#list td").live("click", function () {
                alert($(this).html());
            });

            $("#addFun").click(function () {
                var html = document.getElementById("listTemplate").innerHTML;
                var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'UserID': '1' }[key]; });
                $("#list").append(source);
            });

        });
    </script>
</head>
<body>
    <div id="comment_ul_2">
    </div>
    <input type="button" id="addFun" value="click me" />
    <table id="list" border="1">
        <tbody>
        </tbody>
    </table>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析
這篇文章主要為大家介紹了npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
基于BootStrap實現(xiàn)局部刷新分頁實例代碼
這篇文章主要介紹了基于BootStrap實現(xiàn)局部刷新的分頁的相關(guān)資料,非常不錯，代碼簡單易懂，具有參考價值，需要的朋友可以參考下
2016-08-08
layui表格數(shù)據(jù)復選框回顯設(shè)置方法
今天小編就為大家分享一篇layui表格數(shù)據(jù)復選框回顯設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序?qū)崿F(xiàn)評論功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
TypeScript 中的 .d.ts 文件詳解(加強類型支持提升開發(fā)效率)
.d.ts 文件在 TypeScript 開發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強大的類型系統(tǒng)帶來的優(yōu)勢,提高代碼質(zhì)量和開發(fā)效率,接下來,我們將深入探討如何為 JavaScript 庫和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實踐和注意事項,一起看看吧
2023-09-09
詳解addEventListener的三個參數(shù)之useCapture
本文主要給大家介紹的是addEventListener的三個參數(shù)之中的useCapture參數(shù)的使用及示例分享，有需要的小伙伴參考下
2015-03-03
前端技巧之HTTP中POST提交數(shù)據(jù)四種方式
這篇文章主要為大家介紹了前端技巧之HTTP中POST提交數(shù)據(jù)四種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
在Web關(guān)閉頁面時發(fā)送Ajax請求的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于如何在Web關(guān)閉頁面時發(fā)送Ajax請求的實現(xiàn)方法，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-03-03
Python版實現(xiàn)微信公眾號掃碼登陸
這篇文章主要介紹了Python版實現(xiàn)微信公眾號掃碼登陸，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
js控制文本框只輸入數(shù)字和小數(shù)點的方法
這篇文章主要介紹了js控制文本框只輸入數(shù)字和小數(shù)點的方法,實例分析了javascript使用正則表達式實現(xiàn)限制數(shù)字和小數(shù)點的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03