jquery 根据id动态分配change,click事件等

来源：互联网发布：鹊桥采集软件免费编辑：程序博客网时间：2024/06/16 08:27

因工作的需要~现在要将页面的提示信息内容采用动态分配的方法(虽然不知道哪里好.感觉如果ID多的话会很卡)

但是还是完成了这个恶心的要求..

<!DOCTYPE html><html><head><title></title><meta charset="UTF-8"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="Demo.js"></script></head><body><input id="input1" type="text"><input id="input2" type="text"><input id="input3" type="button" value="save"><select id="sct"><option>1</option></select><input id="input4" type="radio"><select id="ser"><option>321</option><option>12321321</option></select><html>

首先先做了个demo 界面是很简单的几个input,button等框框

然后写好一个js.内容为change等事件会触发的function

function a(){alert(1);}function b() {alert(2);}function c() {alert(3);}

function为几个简单的demo alert

然后再定义一个js为config配置好各个ID的事件名和对应的function,采用json样式

config = {input1:{change:c},input2:{click:a,change:b},input3:{change:a,click:c}}

准备工作都坐好了..接下来就在加载完页面以后动态分配事件.我将方法进行了一层的封装

$(function(){function bindConfig(config) {for(var i = 0 ; i < $("[id]").length; i++){   for(var j in config){   if($("[id]")[i].id == j){   for(var k in config[j]){   $("#" + $("[id]")[i].id).on(k,config[j][k]);   }   }   }  }  }  $.fn.Config = bindConfig;});function bindCofing(code){setTimeout(code,1);}

大致内容就为先获取到整个页面上所有的id属性.然后根据config里面定义好的id相匹配.如果匹配到就是用jquer的on绑定上对应的事件

设定settimeout的原因貌似是因为如果不设定的情况下,jquery还未添加这个方法到属性中去.就找不到方法会报错.

最后就是调动这个方法

bindCofing("$().Config(config)");

这样就可以实现将id对应的事件给绑定在一起.

0 0