前端js中动态添加的元素不能触发绑定事件解决方法

您所在的位置:网站首页 动态添加的元素添加点击事件 前端js中动态添加的元素不能触发绑定事件解决方法

前端js中动态添加的元素不能触发绑定事件解决方法

2024-01-14 18:13| 来源: 网络整理| 查看: 265

问题描述:在页面选择关键词时,需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class,使其随点击更换,目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的,但是换成动态加载后发现只能适用于写死的情况。很无奈,在网上搜索一番后花了点时间终于解决了,下面奉上。 

参考文章:https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1

原本绑定事件如下:

//查询条件class的加载和移除(不能绑定动态加载的标签) $('.value_list').children.click(function(){ $(this).addClass('a-time').siblings().removeClass('a-time'); })

针对的HTML元素如下:

    全部     dayu     天下会     大雨     士大夫

但是发现,原先的事件不能用于动态加载的元素,如上面加载的,加载形式如下:

//获取关键词列表 function getlist(){ $("#subject").html(""); $.ajax({ type: "POST", url:path+"/key/queryKeys.php", dataType : "json", success: function(result) { var data = result.data; console.log(data+" 888"); if(data!=''){ var html='全部'; for(var i=0;i})

我先是使用.live尝试了下,发现gg,心灰意冷ing;本着试一试不要钱的心态又用.on试了下,结果令人惊喜啊!可以使用了,哎,这鬼玩意坑死人。

下面上针对我加载的界面元素写的绑定事件:

//查询条件class的加载和移除(适用于动态加载标签的情况--on事件需要jquery在1.6以上) $('.value_list').on('click','a,span',function(){ $(this).addClass('a-time').siblings().removeClass('a-time'); });

希望能对有同样问题的同学有一点帮助,不谢!

ps:参考文章中有对两种方法需要的版本解析,不清楚的可以去看下,反正看看不要钱!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3