jquery on事件委派用法

小编 2026-06-08 阅读:1437 评论:0

$( elements ).on( events, [selector], data, handler ); elements 代表元素 document div table p #div...

$( elements ).on( events, [selector], data, handler );
elements 代表元素 document div table p #div1 #id a[name=‘update’] form span
events 代表事件 onclick submit
data 代表其他参数
[selector]选择器可选，一个选择器字符串用于过滤器的触发事件的选择器元素的后代。被选元素的子元素必须是\"合法的\"子元素如table 的子元素是 tr td
示例：
$KaTeX parse error: Expected \'EOF\', got \'#\' at position 3: (\"#̲div1\").on(\"clic…$ (this).css(“background-color”,“pink”);
　　});

$KaTeX parse error: Expected \'EOF\', got \'#\' at position 3: (\"#̲div2\").delegate…$ (this).css(“background-color”,“pink”);
　　});
注意：如果 on 绑定的元素是动态元素，则写法必须是这样：
$(document).on(‘click’,\"#detail_table a[name=‘delete’]\",function(e){
//e.target.tagName;
console.log(e.target.id+\",name=\"+e.target.name);
});

<!DOCTYPE html>
<html>
<head>
   <title>jquery on 绑定事件用法</title>
   <link href=\"http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css\" rel=\"stylesheet\">
   <script src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></script>
   <script src=\"json.js\"></script>
   <script src=\"http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js\"></script>
   <script>
   $(function(){	
		var html = \"\";
		var obj = {\"total\":10,\"data\":[{\"msid\":\"186888974499890\",\"state\":\"用户成功\"},{\"msid\":\"186888950650996\",\"state\":\"用户失败\"},{\"msid\":\"186888632315903\",\"state\":\"用户成功\"},{\"msid\":\"186888284765968\",\"state\":\"用户失败\"},{\"msid\":\"186888778721984\",\"state\":\"用户成功\"},{\"msid\":\"18688846658585\",\"state\":\"用户失败\"},{\"msid\":\"186888257605268\",\"state\":\"用户成功\"}],\"state\":\"0\"};
		
		
		
		$.each(obj.data, function(i, item) { 
			html+=\"<tr>\"
				+\"<td id=\'\'>\"+item.msid+\"</td>\"
			    +\"<td>\"+item.state+\"</td>\"
				+\"<td><a href=\'javascript:void(0);\' id=\'\"+item.msid+\"\' name=\'update\'>修改</a></td>\"
				+\"<td><a href=\'javascript:void(0);\' id=\'\"+item.msid+\"\' name=\'delete\'>删除</a></td>\"
				+\"</tr>\";
		});
		
		// onclick=\'update(\"+item.msid+\")\'
		$(\"#detail_table\").html(html);
		
		
		$( \"#detail_table a[name=\'update\']\" ).on( \"click\",function(e) {
		  console.log( e.target.id );
		});
		
		/**
		//修改
		$(document).on(\'click\',\"#detail_table a[name=\'update\']\",function(e){
			//e.target.tagName;
			console.log(e.target.id+\",name=\"+e.target.name);
		});
		//删除
		$(document).on(\'click\',\"#detail_table a[name=\'delete\']\",function(e){
			//e.target.tagName;
			console.log(e.target.id+\",name=\"+e.target.name);
		});
		*/
		
		$(\"div\").delegate(\"button\",\"click\",function(){
		  $(\"p\").slideToggle();
		});
		   
   });
   
   function update(id){
		alert(id);
   }
   
   </script>
</head>
<body>
	<table id=\"detail_table\" class=\"listTable\" > 
			
	</table>
	
	<a href=\'javascript:void(0);\' id=\'132132\' name=\'update\'>修改</a>
	
	<div>
		<p>这是一个段落。</p>
		<button>点击</button>
	</div>

</body>
</html>