jquery on事件委派用法

$( 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\dots$ (this).css(“background-color”,“pink”);
　　});

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div2").delegate\dots$ (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>

jquery on事件委派用法

猜你喜欢