对于Javascript：总是返回相同的值

Question

我有一个像这样的List菜单：

我想从我的数据中生成[li]。 我使用Javascript函数：

for (i = 0; i < 10; i++) {
    var sidebar = $('#side_bar');
    var sidebar_entry = $('<li/>', {
    'html': (i+1),
    'click': function() {
      alert("Li "+i)
    },
    'mouseenter': function() {
      $(this).css('color', 'red');
    },
    'mouseleave': function() {
      $(this).css('color', '#999999');
    }
    }).appendTo(sidebar);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="sidebar-nav" id="side_bar">
  <li class="sidebar-brand" style="font-weight: bold; color: #999999;">
    <h1>Places</h1>
  </li>
  <hr>
</ul>

但结果是，所有[li]的点击返回警报（Li 9）。

为什么？