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

最新推荐文章于 2025-06-19 14:06:18 发布

原创最新推荐文章于 2025-06-19 14:06:18 发布 · 5.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

工作专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何根据需求动态地为页面元素通过jQuery绑定change和click事件。通过创建一个JS函数来处理事件，再配置JSON对象指定ID及其对应事件和函数。设置setTimeout是为了确保在jQuery添加事件方法到元素属性之前进行绑定，避免找不到方法的错误。文章展示了实现这一功能的步骤。

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

因工作的需要~现在要将页面的提示信息内容采用动态分配的方法(虽然不知道哪里好.感觉如果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还未添加这个方法到属性中去.就找不到方法会报错.

最后就是调动这个方法