使用动态生成的 BUTTON 获取 VALUE

我正在 js 中生成日历，但无法从正确按下的按钮中获取值。

发电机功能：

function createInfoOnWidget (...) {
    ...
    for (i = 1; i < lenCalRow; i++) {
        var rowCal = calendarRow[i];
        for (n = 1; n <= 7; n++) {
            let div = document.createElement('div');
            let but = document.createElement('button');
            but.className = 'calendar';
            if (count_past < firstDayMonth) {
                div.textContent = countDaysPastMonth;
                but.value = countDaysPastMonth;
                count_past++;
                countDaysPastMonth++;
            } else {
                if (count <= countCurMonthDays) {
                    div.textContent = count;
                    but.value = count;
                    but.onclick = (e) => { console.log(e.target.value) };
                    count++;
                } else {
                    div.textContent = count_fut;
                    but.value = count_fut;
                    count_fut++;
                };
            }

            but.appendChild(div);
            rowCal.appendChild(but);
        };
    };
    calendarButDate = document.querySelectorAll('.calendar');
};

• 我尝试通过向每个创建的按钮添加一个功能来获取数据 - 有些按钮显示值，有些则不显示。• 尝试通过函数获取数据：

$(document).ready(function () {
    let calendarButDate = document.querySelectorAll('.calendar_widget__body_day_date');
    
    ...

    calendarButDate.forEach( btnDate => {
        btnDate.addEventListener('click', f)
    }); 
    function f(e) {
        console.log(e.target.value);
    };

});

它有效 - 再次部分地，当我更改小部件中的月份时，例如 - 它被重建 - 值改变， forEach 数据没有到达。