最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件。就如:
<ul class="content"></ul>
<span class="test">测试</span>
<script type="text/javascript">
$(function() {
$('.test').click(function() {
$('.content').append('<li>keso</li>');
});
$('.content li').click(function(event) {
console.log('博客园');
});
});
</script>
在append添加的<li>keso</li>上点击控制台就是不输出“博客园”,也就是$('.content li').click(function(event) {console.log('博客园');});根本没有执行。
找了好久才把这个问题解决了。方法如下:
<ul class="content"></ul>
<span class="test">测试</span>
<script type="text/javascript">
$(function() {
$('.test').click(function() {
$('.content').append('<li>keso</li>');
});
$('.content li').click(function(event) {
console.log('博客园');
});
$(document).on('click', '.content li', function() {
console.log('keso');
});
});
</script>
就是用 on()方法就解决了
$(document).on('click', '.content li', function() {
console.log('keso');
});