說起本文，我是因爲項目中的一個問題導致的。然後我查了各種資料總結了一下。
先上代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="tablestyle.css" rel="stylesheet" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//不能捕捉到事件，因爲js是從上到下加載，所以後面動態生成的chenckbox此時還沒有生成。
$("table input[type='checkbox']").click(function () {
alert("1213");
})
//可以捕捉到事件
$("table").on("click", "input[type='checkbox']", function () {
alert("我是on方法");
})
//動態生成表格，我已經習慣用表格做案例了。
Createtable();
function Createtable() {
for (var i = 0; i < 10; i++) {
var jcclass = "trmian" + i;
var childclass = "." + jcclass;
$("#maintable").append("<tr class=" + jcclass + "></tr>")
for (var k = 0; k < 3; k++) {
if (k == 0) {
$(childclass).append("<td>" + i + "</td>");
} else if (k == 1) {
$(childclass).append("<td><input type='checkbox' value='男'/></td>");
} else if (k == 2) {
$(childclass).append("<td><input type='checkbox' value='女'/></td>");
}
}
}
}
})
</script>
</head>
<body>
<table id="maintable">
<tr>
<td>序號</td>
<td>男</td>
<td>女</td>
</tr>
</table>
</body>
</html>
有人會說，既然 $("table input[type='checkbox']").click(function () {alert("1213"); })
不能捕捉到事件，因爲js是從上到下加載，所以後面動態生成的chenckbox此時還沒有生成。那麼直接把他放在表格加載之後就可以了啊？確實，如果你非要這麼做，那確實可以，我也測試過了。但是在實際開發中，前臺的數據往往是從後臺請求過來的，此時是多線程。樓主試驗過，在這種（如ajax）的情況下，及時把上面的方法寫在動態加載後面，也是依然沒有作用的。！所以我們要用$("table").on("input[type='checkbox']","click",function(){""})。只有通過on綁定click事件的方式才能達到效果。
總結：click()和不帶子元素的on()的作用是一樣的，只會對當前存在的dom元素起作用。
帶子元素的on()綁定是可以動態綁定事件，只要父元素在綁定時已經存在。本質是將子元素綁定到父元素上，也就是事件委託。