jquery中$(selector).on(events [, selector] [,function()])为动态添加的内容绑定事件注意事项

最新推荐文章于 2022-05-22 21:41:21 发布

Docoway

最新推荐文章于 2022-05-22 21:41:21 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 动态元素绑定事件 $(selector).on()

本文链接：https://blog.youkuaiyun.com/Docoway/article/details/82990142

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文解析了在jQuery中为动态添加的元素正确绑定事件的方法，避免了直接在HTML元素上添加事件的常见错误，展示了如何利用$(selector).on(events[,selector][,function()])正确绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery中$(selector).on(events [, selector] [,function()])为动态添加的内容绑定事件注意事项

如果前端用jquery进行开发则对动态添加的元素进行事件绑定是一种经常碰到的情况，而在使用过程中经常会遇到.on()绑定事件失效的问题

问题分析

在开发过程中遇到一个高级检索的开发问题，需要动态增减筛选条件，效果如下：

需要具有动态增减的效果

html dom树结构如下：

需要生成重复的

…</> html代码添加到form中，最错误的做法就是直接在新生成的html 元素中添加事件

错误一

<span class="glyphicon glyphicon-trash delete-icon" onclick="deleteItem()"></span>

<span class="glyphicon glyphicon-plus add-icon" onclick="addItem()"></span>

这种是最容易出错的，对于动态生成的html元素直接进行添加事件是没有作用的应该通过$(selector).on(events [, selector] [,function()]) 方式来绑定事件

错误二

$(".deleteSearch span").on("click",function() {
            //if the last one  add the addtion button
            var index = $(this).parents(".modal-body .form-group").index();
            if ($(".modal-body form .form-group:last").index() == index) {
                index = index -1;
                $(".modal-body form .form-group .addition")[index].style.display = 'block';
            }
            //$(this).parents(".modal-body .form-group").css("display","none");
            $(this).parents(".modal-body .form-group").remove();
        });

用这种方式进行的时间绑定对于dom树中已经存在的元素的事件绑定是有用的，但是对于新增的元素绑定的事件不起作用
这是因为你绑定事件的时候还没有不存在 $(" . d e l e t e S e a r c h s p a n ") 的 d o m, 所以你要通过父节点去查找这个$ (".deleteSearch span")的子节点
正确写法如下：

$(".modal-body form").on("click",'.deleteSearch span',function() {
            //if the last one  add the addtion button
            var index = $(this).parents(".modal-body .form-group").index();
            if ($(".modal-body form .form-group:last").index() == index) {
                index = index -1;
                $(".modal-body form .form-group .addition")[index].style.display = 'block';
            }
            //$(this).parents(".modal-body .form-group").css("display","none");
            $(this).parents(".modal-body .form-group").remove();
        });

通过其在dom书中已经存在的父节点进行查找元素绑定！！！