jQuery第二次单击不起作用

Question

我的HTML结构

<tr class="">
<td class="day">20</td>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="disabled day">25</td>
<td class="disabled day">26</td>
</tr>

<tr class="">
<td class="day">13</td>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="disabled day">18</td>
<td class="disabled day">19</td>
</tr>

jQuery脚本

<script>
$(function(){
        $(".day").click(function() {
        alert('Test');
        var first = $(this).closest('tr').children('td:first').text();
        var last = $(this).closest('tr').children('td:last').text();
        $("span#date-range").append( "(Oct "+first+"- Oct "+last+")" );
    });
});
</script>

在页面加载时，当用户单击任何<td> ，它将显示正确的值，但是如果用户再次单击它，则不会执行任何操作。 同样，单击后， HTML结构保持不变，但在Firebug Console看到时将Firebug Console HTML结构。

第一次点击

首次点击后，即后续点击

如果更改<td> ，如何在上面单击多次。

谢谢。

Answer 1

您的html表应该有效并且可以正常工作。 请参阅随附的工作片段：

 $(function(){ $(".day").click(function() { alert('Test'); var first = $(this).closest('tr').children('td:first').text(); var last = $(this).closest('tr').children('td:last').text(); $("span#date-range").append( "(Oct "+first+"- Oct "+last+")" ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table> <tr class=""> <td class="day">20</td> <td class="day">21</td> <td class="day">22</td> <td class="day">23</td> <td class="day">24</td> <td class="disabled day">25</td> <td class="disabled day">26</td> </tr> </table> <tr class=""> <td class="day">13</td> <td class="day">14</td> <td class="day">15</td> <td class="day">16</td> <td class="day">17</td> <td class="disabled day">18</td> <td class="disabled day">19</td> </tr> </table> 

Answer 2

我认为可以通过使用.live或.on mehtod来解决此问题

$(function(){
        $(document).on('click','.day',function() {
        alert('Test');
        var first = $(this).closest('tr').children('td:first').text();
        var last = $(this).closest('tr').children('td:last').text();
        $("span#date-range").append( "(Oct "+first+"- Oct "+last+")" );
    });
});