动态创建相关的功能问题

Question

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

didCreate

请看以下小提琴： https://jsfiddle.net/yuqu6v3v/3/

我尝试在上面的函数中添加一个简单的警告：

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

以及包含以下内容的页面分支（https://jsfiddle.net/wvrfnwxs/）

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

确认选择器$（'td'）仍然有效。

在$('#calendar').on('click',function(){ alert(this.innerHTML); }); 或function nextMonth()重绘下一个月导致选择器无效的日期时，是否有某些内容？或者发生了阻止所需突出显示的其他事情？

感谢您提供的任何帮助！

Answer 1

问题是这段代码：

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

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

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

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

您的#calendar元素永远不会被替换，因此这样的点击处理程序将继续有效。当在该元素上发生click事件时，jQuery会自动检查原始目标元素是否与第.on()个参数中提供的选择器匹配。如果是这样，它会调用你的函数，否则它什么都不做。

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