jq 事件委托delegate

小鱼儿 2021-07-24 18:59 450阅读 0赞

法一:$('要委托的父元素选择器').delegate('子元素选择器','无on的事件',function(){...})
    法二:$('父元素选择器').on('无on的事件','子元素选择器',function(){...});
    给选择器下的子元素委派事件

代码示例:

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <title>jquery_事件委托</title>
      <style type="text/css">
        #box{ 
          width: 400px;
          background: green;
        }
        .a{ 
          width: 200px;
          height: 200px;
          background: #FF0000;
        }
        .b{ 
          width: 100px;
          height: 100px;
          background: #F0f;
        }
      </style>
    </head>
    <body>
      <div id="box">
        <div class="a">a的事件委托</div>
        <br />
        <br />
        <br />
        <div class="b">b的事件委托</div>
        <br />
        <br />
        <br />
        <div id="a">#a事件委托</div>
        <p>Click me!</p>
      </div>
    <script src="js/libs/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){ 
        console.log($('.a').length);
        //1.7以后已经不 支持live了。
    // $('#a').live('click',function(){ 
    // alert('a');
    // })
    				$('#box').delegate('div','click',function(){ 
    					alert('delegate');
    				})
    				
      				$('#box').on('click','div',function(){ console.log(2)})
      })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 委托（Delegate）

C\ 中的委托（Delegate）类似于 C 或 C++ 中函数的指针。委托（Delegate）是存有对某个方法的引用的一种引用类型变量。引用可在运行时被改变。委托（De

电玩女神/ 2024年03月26日 20:59/ 0 赞/ 84 阅读

相关 Delegate,Action,Func,匿名方法,匿名委托,事件

.net中的线程也接触不少了。在多线程中最常见的应用莫过于有一个耗时的操作需要放到线程中去操作，而在这个线程中我们需要更新UI，这个时候就要创建一个委托了来更新UI了，不然会

本是古典何须时尚/ 2022年08月07日 12:48/ 0 赞/ 212 阅读

相关委托(Delegate) 和事件（Event）

委托的声明 public delegate void MyDelegate(string str); 注 1.委托的定义和方法的定义类似，只是在前面加了一个deleg

柔光的暖阳◎/ 2022年08月05日 00:50/ 0 赞/ 237 阅读

相关 JQ高级事件之事件委托

事件委托跟字面意思一样，需要找一个东西来帮助一起完成某个东西。用我们JQ的语言来说就是，我有2000个按钮，但我们不能一个一个绑定，这样太过于浪费操作，那我们怎么做呢，事

╰+攻爆jí腚メ/ 2022年08月01日 13:52/ 0 赞/ 231 阅读

相关 JavaScript事件代理和委托（Delegation）

JavaScript事件代理首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事

野性酷女/ 2022年07月16日 06:48/ 0 赞/ 251 阅读

相关 jquery live（） delegate（） on() 事件委托的一些区别

jquery live（） delegate（） on() 事件委托的一些区别 0 随着DOM结构的复杂化和Ajax等动态脚本技术的运用，有了较多的动态添加进

朱雀/ 2022年07月13日 07:46/ 0 赞/ 181 阅读

相关 addEventListener，jq.on以及事件委托

事件起因：某天在知乎上看到这个问题https://www.zhihu.com/question/56814906。 ![Center][]

不念不忘少年蓝@/ 2022年06月18日 10:40/ 0 赞/ 219 阅读

相关 Delegate,Action,Func,匿名方法,匿名委托,事件

一、委托Delegate 一般的方法(Method)中，我们的参数总是string,int,DateTime...这些基本的数据类型（或者没有参数），比如 \[c-s

迷南。/ 2022年01月06日 05:23/ 0 赞/ 304 阅读

相关 C# 委托（Delegate）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmd5

ゝ一纸荒年。/ 2021年12月21日 06:15/ 0 赞/ 314 阅读

相关 jq 事件委托delegate

法一:$('要委托的父元素选择器').delegate('子元素选择器','无on的事件',function(){...}) 法二:$('父元素选择器').on

小鱼儿/ 2021年07月24日 18:59/ 0 赞/ 451 阅读