javascript - 动态创建<td>相关函数问题

Question

我创建了一个日期选择器，它在初始加载时突出显示今天，然后突出显示用户单击的任何日期。这在第一个月工作正常，但是当进入下个月时，突出显示的脚本不起作用。

$('td').on('click',function(){
    $('td').removeClass('selectedDate');
    $(this).addClass('selectedDate');
});

请参阅以下 fiddle : https://jsfiddle.net/yuqu6v3v/3/

我尝试向上述函数添加一个简单的警报:

$('td').on('click',function(){
    alert('I am a table cell');
    $('td').removeClass('selectedDate');
    $(this).addClass('selectedDate');
});

以及页面的分支 ( https://jsfiddle.net/wvrfnwxs/ )，其中包括:

$('#calendar').on('click',function(){
    alert(this.innerHTML);
});

确认选择器 $('td') 仍然有效。

重绘下个月的天数时，function nextMonth() 或 function Calendar() 中是否有某些内容导致选择器无效？或者发生其他事情阻碍了所需的突出显示？

感谢您提供的任何帮助!

Answer 1

问题在于这段代码:

$('td').on('click',function(){

...将点击处理程序绑定(bind)到当时存在的任何 td 元素。当您单击下个月按钮时，您将重新创建整个表，因此以前的 td 元素将消失，并且您不会将任何点击处理程序绑定(bind)到新元素。

最简单的解决方法是使用绑定(bind)到包含元素的委托(delegate)事件处理程序:

$('#calendar').on('click', 'td', function(){
// Note this argument -----^^^^

您的#calendar元素永远不会被替换，因此这样的点击处理程序将继续工作。当该元素上发生单击事件时，jQuery 会自动检查原始目标元素是否与 .on() 的第二个参数中提供的选择器匹配。如果确实如此，它将调用您的函数，否则它将不执行任何操作。

演示:https://jsfiddle.net/yuqu6v3v/5/