<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ENTRUST</title>
</head>
<body>
<div id="entrust">
<button class="btn_class"> 測試 </button>
<button class="b_class"> 測試_測試 </button>
<div>
<button id="btn_id"> 測試1 </button>
<button id="b_id"> 測試_測試1 </button>
</div>
</div>
<script type="text/javascript" src="jquery/jquery-min.js"></script>
<script>
$(document).on('click','.btn_class',function(){
console.log(this.class,"測試——class");
});
$('.b_class').click(function () {
console.log(this.class,"測試——測試-class")
});
$('#btn_id').click(function () {
$("<button class='btn_class'> 測試 </button>").insertAfter('.b_class');
});
$('#b_id').click(function () {
$("<button class='b_class'> 測試_測試 </button>").insertBefore('.btn_class');
});
</script>
</body>
</html>
單單從形式上來說，on綁定給document，document委託給所有的class=btn_class的按鈕，這樣即使動態添加的同類名btn，也都會執行on綁定的事件；click綁定的只是class=b_class的btn，在綁定的時候只綁定給已存在的b_class的btn，b_class的click事件不會被新創建的按鈕執行。