首先看一段html代碼
<body>
<button id="addText">添加文本</button>
<div id="alert">1</div>
</body>
<script>
innerHtml = '<tr class="menus">' +
'<td>我是測試文本<input type="checkbox" name="checkbox" class="checkAttrs" ></td>' +
'</tr>';
$('#addText').click(function () {
$('#alert').html(innerHtml);
});
$('.checkAttrs').click(function () {
alert("click方法");
});
</script>
第一個click事件，即摁扭id爲addText的事件是可以觸發的，因爲頁面先有，再有綁定方法。
第二個click事件，即class爲checkAttrs的事件不可觸發，因爲先有方法，頁面是點擊摁扭之後加的。
on事件委託:父元素接收委託事件
<body>
<button id="addText">添加文本</button>
<div id="alert">1</div>
</body>
<script>
innerHtml = '<tr class="menus">' +
'<td>我是測試文本<input type="checkbox" name="checkbox" class="checkAttrs" ></td>' +
'</tr>';
$('#addText').click(function () {
$('#alert').html(innerHtml);
});
$("body").on('click', '.checkAttrs', function () {
alert("on方法");
});
</script>