$( 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>