如何用jQuery批量创建新对象时,新增对象也带有事件函数(事件代理的运用)

最新推荐文章于 2021-09-14 16:50:33 发布

wokkey

最新推荐文章于 2021-09-14 16:50:33 发布

阅读量290

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_46363283/article/details/105882826

版权

在这里插入图片描述
开始时是不带任何事件的 , 要想让新创建的对象也带有事件就要用到事件代理 , 在父元素中添加子对象那么就要用父元素做事件代理
css代码:

.parent {
      border: 1px solid blue;
      margin: 10px;
      overflow: hidden;
    }

    .child {
      border: 1px solid red;
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

html代码:

<div class="parent">
    <div class="child">1</div>
    <div class="child two">2</div>
    <div class="child">3</div>
  </div>

Js代码:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
  <script>
    $(function () {
      
//on方法的参数,第一个是动作,第二个是要代理的子对象,第三个参数想要添加的函数
      $('.parent').on('click','.child',function(){
          alert(1);
      })
      for(var i = 0 ;i<5;i++){
        var $div = $(`<div class="child">1</div>`);
        //选中class为parent的对象,向其中添加$div对象
        //这时新添加的对象,每一个都带有function(){alert(1)}
        $('.parent').append($div);
      }
    })
  </script>

效果为:
在这里插入图片描述可以看见事件是在父元素parent上的,但是点击parent空白部分是没有反应的,只有点击其中的红色方框才会弹出窗口
需要注意的是新增对象放在什么元素中 , 就用该元素为新增对象做事件代理 , 下面附上完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM操作</title>
  <style>
    .parent {
      border: 1px solid blue;
      margin: 10px;
      overflow: hidden;
    }

    .child {
      border: 1px solid red;
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .teal {
      border: 1px solid teal;
    }

    .tealone {
      border: 1px solid teal;
      overflow: hidden;
      margin: 10px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
  <script>
    $(function () {
      
      $('.parent').on('click','.child',function(){
          alert(1);
      })
      for(var i = 0 ;i<5;i++){
        var $div = $(`<div class="child">1</div>`);
        $('.parent').append($div);
      }
    })
  </script>
</head>

<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child two">2</div>
    <div class="child">3</div>
  </div>
  <!-- <div class="parent">
    <div class="child">1</div>
    <div class="child two">2</div>
    <div class="child">3</div>
  </div> -->
</body>

</html>

wokkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用jQuery批量创建新对象时,新增对象也带有事件函数(事件代理的运用)

开始时是不带任何事件的 , 要想让新创建的对象也带有事件就要用到事件代理 , 在父元素中添加子对象那么就要用父元素做事件代理css代码:.parent { border: 1px solid blue; margin: 10px; overflow: hidden; } .child { border: 1px solid r...
复制链接

扫一扫