如何给jquery给动态生成的dom绑定事件

image.png
<div class="c1 cf">   

        <div class="home fl">

            <img src="img/header/home.png"/>

        </div>

        <div class="selected fl">  //dom操作生成的元素

            <span class="sel-span">水权管理</span>
                    
            <img class="sel-img" src="img/cha.png"/>
        </div>
</div>

无效写法:
$("#user .regist ").click(function(){
console.log(111)
});

正确写法:(给dom操作的上一级绑定)
$(".c1").on("click",".selected",function(){
console.log(111)
})

分析:

on(events,[selector],[data],fn)
events:一个或多个空格分隔的事件类型和可选择的命名空间,例如“click”或者"keydown.myPlugin"
selector:一个选择器字符串用于过滤器的触发时间的选择器元素的后代,即要绑定事件的dom元素选择器
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数
on方法实现的一个重要原因是js的事件冒泡,就是子元素产生的事件会一直冒泡到最顶级的父级元素,并且能够父级元素监测到。

参考:https://blog.csdn.net/m0_37263637/article/details/79001094

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,364评论 0 8
  • 本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址:https://chuanke.baidu.co...
    IT老马阅读 2,594评论 3 14
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 683评论 0 1
  • 普济寺原本是的名字是普吉庵,大者为寺,小为庵,扩建后改成了寺,但不管是普吉庵还是普济寺里住着的都是和尚。 行者在赵...
    云侍阅读 787评论 0 3