Question

我正在创建自己的自定义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);
}

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

$('#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>

Answer 1

要定位ID，只需使用#

即可

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

代表中的内容相同

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

Answer 2

您在进行绑定后是否生成日历，如果日历尚不存在，您将无法绑定左箭头单击。你应该绑定一个总是像身体一样的元素，特别是如果你使用一个独立的id作为选择器

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

JQuery点击事件而不是Trigerred

2 个答案: