热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery中delegate()方法的用法详解

delegate()方法是为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数。下面就是详细介绍,有需要的朋友可以来介绍一下。

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。下面我们具体来了解一下。

语法结构:

代码如下:

$(selector).delegate(childofselector,type,data,function)

参数说明:

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

delegate 的函数是被某一类型的共同父元素调用,

 代码如下:

listNode.delegate('.condition-remove','click',function(e){

e.preventDefault();

$(this).parents('.search-condition-item').remove();

}
);

完整实例

代码如下:

function renderSearchConditions(selectionId,conditions){var cOnditionsTemplate= '
'+ '
    '+ '
    ', listNode = $(conditionsTemplate); listItemTemplate = '
  • {condition}x
  • '; for(var key in conditions) { var cOndition= conditions[key].keyword, cOnditionType= conditions[key].type, listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition}); listNode.append(listItemNode); } $(selectionId).prepend(listNode); listNode.delegate('.condition-remove','click',function(e){ e.preventDefault(); $(this).parents('.search-condition-item').remove(); } ); }

    1.绑定的事务中,获取事务源,调用hide办法,并传入事务源对象:

     代码如下:

    $(document).delegate("body", "click", function(e) {
      var ev = e || window.event; // 事务
      //var target = ev.target || ev.srcElement; // 获得事务源
      hide(ev.target || ev.srcElement, true);
     }
     );

    底本用的$(window),然则IE8之前的,貌似有bug。

     $(document)不好之处,页面加载完后,会触发一次...

    2. hide办法中,断定该事务源是否从指定元素中发出,即事务源元素是不是指定元素的子元素或者其本身。

     代码如下:

    //子元素断定====
     if (!!window.find)HTMLElement.prototype.cOntains= function(B) {
      return this.compareDocumentPosition(B) - 19 > 0
     };
    
     function hide(dom, isClick) {
      var nn,t,_isClick = !!isClick;
      try {
       for (var n in objList) {
        nn = objList[n];
        t = nn.getOption("target")[0];
        if (_isClick && (t == dom || t.contains(dom)))return;
        if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
       }
      } catch(e) {
      }
     }
    
    


    3.上方的hide办法中,isClick变量 断定 是不是点击事务触发的。以便处理惩罚resize的。resize用settimeout作处理惩罚,降落内存消费.

     代码如下:

    var reTime = null;
     $(window).bind("resize", function() {
      if (reTime) clearTimeout(reTime);
      reTime = setTimeout(hide, 50);
     }
     );

    推荐阅读
    • 国内BI工具迎战国际巨头Tableau,稳步崛起
      尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
    • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
    • 技术分享:从动态网站提取站点密钥的解决方案
      本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
    • CSS 布局:液态三栏混合宽度布局
      本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
    • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
    • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
    • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
    • python的交互模式怎么输出名文汉字[python常见问题]
      在命令行模式下敲命令python,就看到类似如下的一堆文本输出,然后就进入到Python交互模式,它的提示符是>>>,此时我们可以使用print() ... [详细]
    • 火星商店问题:线段树分治与持久化Trie树的应用
      本题涉及编号为1至n的火星商店,每个商店有一个永久商品价值v。操作包括每天在指定商店增加一个新商品,以及查询某段时间内某些商店中所有商品(含永久商品)与给定密码值的最大异或结果。通过线段树分治和持久化Trie树来高效解决此问题。 ... [详细]
    • Java 中的 BigDecimal pow()方法,示例 ... [详细]
    • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
      本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
    • 本文总结了汇编语言中第五至第八章的关键知识点,涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容,帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]
    • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
    • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
    • 导航栏样式练习:项目实例解析
      本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
    author-avatar
    早起床的小鸟
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有