脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → delegate与live

JS delegate与live浅析

 更新时间：2013年12月21日 14:51:27   作者：  
这篇文章主要介绍了JS delegate与live，有需要的朋友可以参考一下

在jquery里有两个方法可以用来绑定自动追加出来的ＤＯＭ对象，它们是live和delegate，事实上，这两个方法是bind方法的一个变体，在对于固定ＤＯＭ对象时，我们通常使用bind就可以了，而对象动态产生的ＤＯＭ对象，使用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是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。

        $(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>

您可能感兴趣的文章:

相关文章

  • javascript实现一个简单的弹出窗

    javascript实现一个简单的弹出窗

    本文给大家分享的是使用javascript实现的一个简单的弹出窗的代码，非常的简单实用，有需要的小伙伴可以参考下
    2016-02-02
  • 怎样用JavaScript实现原型模式

    怎样用JavaScript实现原型模式

    这篇文章主要介绍了怎样用JavaScript实现原型模式，想学习设计模式的同学，可以参考下
    2021-04-04
  • 那些项目中常见的TypeScript错误总结

    那些项目中常见的TypeScript错误总结

    这篇文章主要给大家总结介绍了一些项目中常见的TypeScript错误的相关资料,如果你想查看所有的错误信息和错误码,可以浏览TypeScript的源代码仓库,当然随着 ts 版本的更新,官网也会逐渐增加更多新的类型错误,需要的朋友可以参考下
    2022-03-03
  • javascript:void(0)使用探讨

    javascript:void(0)使用探讨

    如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情一般都是设置属性href = "#"其实还有比这更好的方法，下面为大家整理了几种比较常见的解决方法，感兴趣的朋友可以参考下
    2013-08-08
  • js onmousewheel事件多次触发问题解决方法

    js onmousewheel事件多次触发问题解决方法

    做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，下面是问题解决方法
    2014-10-10
  • 同时使用n个window onload加载实例介绍

    同时使用n个window onload加载实例介绍

    window onload加载多个同时使用，想必有很多人没有用过吧，接下来为大家详细介绍下具体的使用方法，感兴趣的朋友可以参考下
    2013-04-04
  • 微信小程序 连续旋转动画（this.animation.rotate）详解

    微信小程序 连续旋转动画（this.animation.rotate）详解

    这篇文章主要介绍了微信小程序 连续旋转动画（this.animation.rotate）详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • 详解JavaScript对象序列化

    详解JavaScript对象序列化

    这篇文章主要为大家介绍了JavaScript对象序列化的相关资料,需要的朋友可以参考下
    2016-01-01
  • Weex开发之地图篇的具体使用

    Weex开发之地图篇的具体使用

    这篇文章主要介绍了Weex开发之地图篇的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JS基于开关思想实现的数组去重功能【案例】

    JS基于开关思想实现的数组去重功能【案例】

    这篇文章主要介绍了JS基于开关思想实现的数组去重功能,简单分析了开关思想的原理,并结合具体实例形式分析了javascript基于开关思想实现数组去重相关操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论