JQuery点击事件未触发

我正在创建自己的自定义javascript日历。shell日历生成成功，看起来不错。然而，我无法触发onclick事件。当我点击按钮时，它什么也不做。

Html是如何生成的：

var GenerateCalendar = function(){
    var calDiv = $('#cal');
    var cal = new Calendar(8,2009);
    cal.generateHTML();
    var calHtml = cal.getHTML();
    calDiv .html(calHtml);
}

我尝试将下面的每个点击事件添加到左箭头锚，但没有成功：

$('#cal').delegate('click','leftArow', function () {
    console.log('you click me.');
});
$('#leftArrow').on('click', function () {
    console.log('you click me.');
});
$('#cal').on('click','leftArrow', function () {
    console.log('you click me.');
});

GenerateCalendar创建了以下html文件

<table class="calendar-table">
  <tbody>
    <tr>
      <th><a href="#" id="leftArrow">
           <span class="fa fa-arrow-left"></span>
          </a>
       </th>
       <th colspan="5">
         <span id="month">September</span>&nbsp;
         <span id="year">2009</span>
       </th>
        <th>
            <a href="#" id="rightArrow">
              <span class="fa fa-arrow-right"></span>
            </a>
        </th>
    </tr>
    <tr class="calendar-header">
      <td class="calendar-header-day">SUN</td>
      <td class="calendar-header-day">MOM</td>
      <td class="calendar-header-day">TUE</td>
      <td class="calendar-header-day">WED</td>
      <td class="calendar-header-day">THU</td>
      <td class="calendar-header-day">FRI</td>
    </tr>
    <tr>
      <td class="calendar-day"></td>
      <td class="calendar-day"></td>
      <td class="calendar-day">1</td>
      <td class="calendar-day">2</td>
      <td class="calendar-day">3</td>
      <td class="calendar-day">4</td>
      <td class="calendar-day">5</td>
    </tr>
    <tr>
      <td class="calendar-day">6</td>
      <td class="calendar-day">7</td>
      <td class="calendar-day">8</td>
      <td class="calendar-day">9</td>
      <td class="calendar-day">10</td>
      <td class="calendar-day">11</td>
      <td class="calendar-day">12</td>
    </tr>
    <tr>
      <td class="calendar-day">13</td>
      <td class="calendar-day">14</td>
      <td class="calendar-day">15</td>
      <td class="calendar-day">16</td>
      <td class="calendar-day">17</td>
      <td class="calendar-day">18</td>
      <td class="calendar-day">19</td>
    </tr>
    <tr>
      <td class="calendar-day">20</td>
      <td class="calendar-day">21</td>
      <td class="calendar-day">22</td>
      <td class="calendar-day">23</td>
      <td class="calendar-day">24</td>
      <td class="calendar-day">25</td>
      <td class="calendar-day">26</td>
    </tr>
    <tr>
      <td class="calendar-day">27</td>
      <td class="calendar-day">28</td>
      <td class="calendar-day">29</td>
      <td class="calendar-day">30</td>
      <td class="calendar-day">31</td>
      <td class="calendar-day"></td>
      <td class="calendar-day"></td>
    </tr>
</tbody>
</table>