jq 事件委托delegate

小鱼儿 2021-07-24 18:59 471阅读 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 条评论，471人围观）

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

相关阅读

相关 C# 委托（Delegate）

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

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

相关 C# 委托（Delegate）

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

末蓝、/ 2024年03月22日 22:55/ 0 赞/ 78 阅读

相关 JavaScript中的事件委托（event delegation）

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ JavaScript事件委托 ⭐ 事件冒泡（Event Bubbling） ⭐ 事件委托的优点

矫情吗；*/ 2023年10月15日 12:59/ 0 赞/ 16 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 C# 委托（Delegate）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbmd5

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

相关 jq 事件委托delegate

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

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