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