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');
      });