预订应用中重新注入的HTML按钮无法添加active类问题求助

一、先修复按钮ID唯一性问题 #

你当前Twig模板里所有时间按钮都用了同一个id="timeBtn"，这违反HTML规范（ID必须唯一），会导致querySelectorAll无法精准识别每个按钮，还会让localStorage的存储key互相覆盖。

修改Twig模板，给每个按钮生成唯一ID，比如用预约时间的时间戳，同时把统一标识改成class：

<div class="time-slots-wrapper">
    <h2 class="text-center">Midi</h2>

    <ul class="d-flex flex-wrap justify-content-center mx-auto mt-3 list-unstyled text-small time-slots-container">
        <div class="js-day" {% for index in time %} data-is-open="{{ index.isclosed ? 'false' : 'true' }}" {% endfor %}></div>

        {% for reservation in availableDateAm %}
            <li class="mx-1 my-1">
                <a class="btn btn-outline-secondary lexend time-btn" id="timeBtn-{{ reservation | date('U') }}">{{ reservation | date("H:i")}}</a>
            </li>
        {% endfor %}
    </ul>

    <hr class="mt-5">

    <h2 class="mt-1 text-center">Soir</h2>

    <ul class="d-flex flex-wrap justify-content-center mx-auto mt-3 list-unstyled text-small time-slots-container">
        {% for reservation in availableDatePm %}
            <li class="mx-1 mt-1 my-1">
                <a class="btn btn-dark lexend time-btn" id="timeBtn-{{ reservation | date('U') }}">{{ reservation | date("H:i")}}</a>
            </li>
        {% endfor %}
    </ul>
</div>

二、用事件委托处理动态元素的点击 #

直接给按钮绑定事件的方式，对AJAX新注入的元素无效。改用事件委托，把事件绑定到更上层的容器（或document），这样新生成的按钮也能触发点击逻辑：

// 事件委托：绑定到document（如果有固定的父容器，绑定到父容器更高效）
document.addEventListener('click', function(e) {
    // 判断点击的是时间按钮
    if (e.target.classList.contains('time-btn')) {
        const button = e.target;
        // 切换active类
        button.classList.toggle('active');
        // 保存状态到localStorage
        const isActive = button.classList.contains('active');
        localStorage.setItem(button.id, isActive ? 'clicked' : '');
    }
});

三、AJAX渲染完成后恢复按钮状态 #

每次AJAX重新渲染页面后，需要主动读取localStorage里的状态，给新按钮加上对应的active类。把恢复逻辑封装成函数，在AJAX的回调里调用：

function restoreButtonStates() {
    const buttons = document.querySelectorAll('.time-btn');
    buttons.forEach(button => {
        const isClicked = localStorage.getItem(button.id);
        // 直接根据存储状态设置类
        button.classList.toggle('active', !!isClicked);
    });
}

// 页面首次加载时先恢复一次状态
document.addEventListener('DOMContentLoaded', restoreButtonStates);

// 示例AJAX请求（根据你的实际业务逻辑调整）
function loadAvailableTimes(selectedDate) {
    fetch(`/your-ajax-url?date=${selectedDate}`)
        .then(res => res.text())
        .then(html => {
            // 把新渲染的HTML注入页面
            document.querySelector('.time-slots-wrapper').innerHTML = html;
            // 恢复按钮选中状态
            restoreButtonStates();
        });
}

内容的提问来源于stack exchange，提问作者ill us