动态布局克隆问题：切换后layout1无法再次显示

核心问题 #

第二次点击按钮无法切换回layout1的原因有两个：

1. 事件绑定失效：初始仅给layout1内的按钮绑定了点击事件，克隆生成的layout2内的新按钮未绑定任何事件，点击它不会触发切换逻辑。
2. 重复ID问题：克隆后DOM中存在两个id="button"的元素，违反HTML ID唯一性规范，可能导致后续选择器匹配异常。

解决方案一：使用事件委托（推荐） #

通过将事件绑定到更高层级的父元素（如document），所有匹配选择器的按钮点击都会触发逻辑，同时修正重复ID问题：

let active_layout = 1;

document.addEventListener('DOMContentLoaded', function () {
    const layout1 = document.getElementById('layout1');
    const layout2 = document.getElementById('layout2');

    layout2.classList.add('hidden');

    // 事件委托监听所有按钮点击
    document.addEventListener('click', function (e) {
        if (e.target.matches('#button, #button-2')) {
            if (active_layout === 1) {
                const elm_cloned = layout1.cloneNode(true);
                elm_cloned.querySelector('h1').textContent = 'Layout 2';
                elm_cloned.querySelector('p').textContent = 'This is layout 2.';
                // 修改克隆按钮的ID，避免重复
                elm_cloned.querySelector('#button').id = 'button-2';

                layout2.innerHTML = '';
                layout2.appendChild(elm_cloned);

                layout1.classList.add('hidden');
                layout2.classList.remove('hidden');
            } else {
                layout1.classList.remove('hidden');
                layout2.classList.add('hidden');
            }

            active_layout = active_layout === 1 ? 2 : 1;
        }
    });
});

解决方案二：将切换按钮移出布局容器 #

把按钮放在两个布局外面，确保按钮始终存在且事件绑定不会失效，同时避免克隆按钮：

修改后的HTML：

<button id="button">Switch Layout</button>
<div class="layout1" id="layout1">
    <h1>Layout 1</h1>
    <p>This is layout 1.</p>
</div>
<div class="layout2" id="layout2"></div>

对应的JavaScript代码无需修改事件绑定逻辑，直接沿用你原本的代码即可：

let active_layout = 1;

document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('button');
    const layout1 = document.getElementById('layout1');
    const layout2 = document.getElementById('layout2');

    layout2.classList.add('hidden');

    button.addEventListener('click', function () {
        if (active_layout === 1) {
            let elm_cloned = layout1.cloneNode(true);
            elm_cloned.querySelector('h1').textContent = 'Layout 2';
            elm_cloned.querySelector('p').textContent = 'This is layout 2.';

            layout2.innerHTML = '';
            layout2.appendChild(elm_cloned);

            layout1.classList.add('hidden');
            layout2.classList.remove('hidden');
        } else {
            layout1.classList.remove('hidden');
            layout2.classList.add('hidden');
        }

        active_layout = (active_layout === 1) ? 2 : 1;
    });
});

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