`

事件委派笔记1

阅读更多
<!DOCTYPE html>
<html>
  <head>
    <title>left.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    
	<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-1.9.0.js"></script>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
	</style>
	
	<script type="text/javascript">
		$(function(){
		 	console.log($("#div1"));
		 	
			
			$("p").click(function(){
				alert("clicked");
			});
			
			$("#div1").on("click","p",function(){alert("on clicked");});
			
			$("div").append("<p>hello</p>");
			
		});
		
	</script>
	
  </head>
  
  <body>
  	 <div id="div1"></div>
	
	 

  </body>
</html>


这里在代码的最后的地方加入了<p>hello</p>

上面的例子中,
$("p").click的函数是无法被执行的。
而$("#div1").on("click","p",function(){});
这里是可以执行的。

也就是说 on()这个函数可以将事件处理绑定到现在已经存在的, 包括将来会被添加进去的节点中去。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics