table后台动态添加tr，前台绑定事件

最新推荐文章于 2024-05-29 11:34:20 发布

原创最新推荐文章于 2024-05-29 11:34:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #动态绑定事件

本文介绍了解决因业务需求变更导致的前端事件绑定失效问题。原先绑定在前台元素上的事件，在后台渲染元素后不再生效。通过使用jQuery的.on()方法成功为动态生成的元素添加点击事件，并实现弹窗功能。

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

业务需求更改，table中原本前台绑定已有元素事件，变成后台渲染元素，前台加事件

原本用元素 on直接绑定，但是一直不起作用，查了相关资料，找到方法

 $("table tbody").on("click",'tr a',function(){
            layer.open({
                title:'弹窗',
                type: 2,
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 1, //不显示关闭按钮 content:
                area: ['300px', '300px'],
                anim: 2,
                shadeClose: false, //开启遮罩关闭
                content: '{{url}}',
                success:function(layero,index){
                    var body = layer.getChildFrame('body',index);//建立父子联系
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    // body.find('.tips ul').append($("ul li"));
                } 
            });

        })