動態創建​​相關功能問題

Question

我有一個我創建的日期選擇器，它在今天的初始加載中突出顯示，然後突出顯示用戶點擊的任何日期。這在最初的月份可以正常工作，但在前進到下個月時，突出顯示的腳本不起作用。

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

請參閱下面的小提琴： 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); 
}); 

to c確認選擇器$（'td'）應該仍然有效。

有什麼在function nextMonth()或function Calendar()時重繪下個月的日子，是使選擇變得無效？或其他發生的事情是阻止所需的突出顯示？

感謝您提供的任何幫助！

Answer 1

的問題是，這種代碼：

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

...綁定一個單擊處理程序，在那一刻存在任何td元素。當你點擊下個月按鈕時，你重新創建了整個表格，所以那些先前的td元素已經消失了，而且你不會將任何點擊處理器綁定到新的元素上。

最簡單的解決方法是使用綁定到一個包含元素委派的事件處理程序：

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

你#calendar元素從未更換，所以這樣的點擊處理程序將繼續工作。當該元素髮生點擊事件時，jQuery會自動檢查原始目標元素是否與.on()的第二個參數中提供的選擇器匹配。如果它確實會調用你的函數，否則它什麼也不做。

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