jquery在页面加载完成后再append的元素事件无效问题

最近遇到一个问题,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');
});
上一篇:X--名称空间详解


下一篇:网页图片很多时,加载完后再加载图片(defer:延迟加载)