动态布局克隆

Question

我想在 2 个 HTML 页面布局（布局 1 和布局 2）之间切换，其中布局 2 是从布局 1 派生（克隆）的，因为它们几乎相同。我已将我的项目简化为这个小示例，它显示了我的问题：单击第二个按钮时，layout1 不会再次出现。有人可以给我提示为什么会发生这种情况吗？提前非常感谢您：

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;
    });
});

.layout1,
.layout2 {
    background-color: #f0f0f0;
    padding: 20px;
    margin: 10px;
}
.layout1.hidden,
.layout2.hidden {
    display: none;
}

<div class="layout1" id="layout1">
    <h1>Layout 1</h1>
    <button id="button">Switch Layout</button>
    <p>This is layout 1.</p>
</div>
<!-- Layout 2 -->
<div class="layout2" id="layout2">
    <!-- Content of Layout 2 will be cloned from Layout 1 during runtime -->
</div>

Answer 1

问题是事件监听器没有与 DOM 一起克隆/传输。 因此，如果您将按钮移到布局 1 之外，它就可以正常工作：

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;
    });
});

.layout1,
.layout2 {
    background-color: #f0f0f0;
    padding: 20px;
    margin: 10px;
}
.layout1.hidden,
.layout2.hidden {
    display: none;
}

<button id="button">Switch Layout</button>
<div class="layout1" id="layout1">
    <h1>Layout 1</h1>
    <p>This is layout 1.</p>
</div>
<!-- Layout 2 -->
<div class="layout2" id="layout2">
    <!-- Content of Layout 2 will be cloned from Layout 1 during runtime -->
</div>