jquery on事件委派用法

阿新 • • 發佈：2018-12-22

$( 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事件委派用法

jquery on事件委派用法

jquery on高級用法

Jquery之事件委派詳解

jquery on()事件多次呼叫解決辦法

jquery on()事件繫結

jquery事件繫結.on()、解綁事件off()用法詳解

Jquery on方法綁定事件後執行多次

jQuery源碼解析之on事件綁定

jQuery.on()用法

javascript事件委託理解，jQuery on 方法一步到位實現事件委託

JQuery - on繫結多個事件

jquery on監聽click事件在 ios無效Android沒事

jQuery on() 方法為選定已存在元素和未來元素繫結標準事件和自定義事件

jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？

JQuery的on事件多次觸發問題

jQuery中的事件委派（代理事件）delegate

jQuery on（繫結事件）前別忘了off（移除事件）

jquery on繫結多個事件

jquery keyup事件與on事件

jquery live（） delegate（） on() 事件委託的一些區別

jquery on事件委派用法

相關推薦