1. $(選擇器).click(fn)
當選中的選擇器被點擊時觸發回調函數fn。只針對與頁面已存在的選擇器。
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('ul>li').click(function() {
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>
</html>
效果圖：后面動態創建的5和6，沒法進行點擊事件觸發。
2.$(選擇器).on('click',function(){})
on方法包含很多事件，點擊，雙擊等等事件。和$().click()的用法一樣，最大的區別即優點是如果動態創建的元素在該選擇器選中范圍內是能觸發回調函數。
（支持動態綁定元素，即頁面上元素有添加或變化后仍可綁定,前提是‘選擇器’須是目標綁定元素的父元素）
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('body').on('click', 'ul>li', function() { console.log($(this).html()); }); $('ul').append('<li>5</li><li>6</li>'); }) </script> </body> </html>
效果圖：動態添加的元素也能被點擊觸發函數。
