當在javascript函數內部動態創建div時，jquery的click事件不起作用，但在頁面加載時它起作用

Question

當在javascript函數內部動態創建div時，jquery的click事件不起作用，除非在頁面加載時起作用。

在按鈕上單擊，我將月份傳遞給setCalenderMonth（）函數，該函數創建該月份的html並追加到類似$（'＃calendar'）。html（html）;的位置。

HTML：1月2日2月1日3月1日

JS: 
    function setCalenderMonth(calenderMonth){
    let html="";
    $('#calendar > div').remove();
    html = "<div class='table-responsive-md'><table class='table table-borderless text-center' id='monthTable'><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>";

    for(i=0;i<=41;i++){
         // if week is over then start a new line
        if((i%7)==0){
            html += "</tr><tr>";
        }
        // if week is over then start a new line
        if((i>= first_day) && (dy<= last_date)){
            html += "<td class='monthDay'><span style='cursor:pointer;padding:2px 6px'>"+ dy +"</span></td>";
            dy=dy+1;
        }
        else {
            html += "<td></td>";
        } // Blank dates.
    } // end of for loop

    html += "</tr></table></div>";
    $('#calendar').html(html);
}

jQuery的：

$('.monthDay').unbind().on('click',function()
{
    $(this).toggleClass('selected');
)};

Answer 1

嘗試以下方法：

$('body').on('click', '.monthDay',function()
{
    $(this).toggleClass('selected');
)};

並且它將觸發您動態添加的所有元素。