首先看一段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>