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

2018-5-24    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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

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

原本绑定事件如下：

[javascript] view plain copy
  1. //查询条件class的加载和移除（不能绑定动态加载的标签）  
  2. $('.value_list').children.click(function(){     
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  

针对的HTML元素如下：

[html] view plain copy
  1. <div class="value_list value_list1" style="width: 80%;" id="subject">  
  2.     <span class="mr36" onclick="selectTopic(0)" value="0">全部</span>  
  3.     <a href="javascript:;" onclick="selectTopic("6eac9783353d40bba49e6b253e73f285")" value="dayu" types="subject" class="a-time">dayu</a>  
  4.     <a href="javascript:;" onclick="selectTopic("f9cbaa888cf34a99b6c50bf393e1a859")" value="天下会" types="subject" class="">天下会</a>  
  5.     <a href="javascript:;" onclick="selectTopic("3f4aa8924c88466dafc63d52aa57e7a6")" value="大雨" types="subject">大雨</a>  
  6.     <a href="javascript:;" onclick="selectTopic("87259765e9174a3b9d97f00a461e90bd")" value="士大夫" types="subject" class="">士大夫</a>  
  7. </div>  

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

[javascript] view plain copy
  1. //获取关键词列表  
  2. function getlist(){  
  3.     $("#subject").html("");  
  4.     $.ajax({  
  5.         type: "POST",  
  6.         url:path+"/key/queryKeys.php",  
  7.         dataType : "json",  
  8.         success: function(result) {  
  9.             var data = result.data;  
  10.             console.log(data+" 888");  
  11.             if(data!=''){  
  12.                 var html='<span class="a-time mr36" onclick="selectTopic(0)" value="0">全部</span>';  
  13.                 for(var i=0;i<data.length;i++){//如果不加"则只能传递数字变量而不能传递带有字母的变量，加上"则无影响  
  14.                 //  html+='<li class="fl"><i class="iconfont close" onclick="del("'+data[i].kw_id+'")"></i>'+data[i].kw_word+'</li>';  
  15.                     html+='<a href="javascript:;" onclick="selectTopic("'+data[i].kw_id+'")" value="'+data[i].kw_word+'" types="subject">'+data[i].kw_word+'</a>'  
  16.                 }                             
  17.                 $("#subject").html(html);  
  18.             }else{  
  19.                 alert("请先登陆！");   
  20.             }  
  21.         }  
  22.          });   
  23. }  

无奈，只能上网寻求万能的大神了。

基本上提供的解决方案就两个，使用 

$('element').live('click',function(){})

或者 

$('父元素').on('click', '子元素', function(){})

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

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

[javascript] view plain copy
  1. //查询条件class的加载和移除（适用于动态加载标签的情况--on事件需要jquery在1.6以上）  
  2. $('.value_list').on('click','a,span',function(){  
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
  4. ;  

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« 卡片式UI设计欣赏 懒加载封装实现 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档