为什么在同一页面上添加innerHTML后切换类不起作用

在同一页面上添加innerHTML后切换类不起作用的原因是因为innerHTML会重新渲染整个页面的HTML结构，这会导致之前已经绑定的事件和类失效。

具体来说，当使用innerHTML添加新的HTML内容时，浏览器会将原有的HTML结构完全替换掉，包括其中的元素、事件和类。因此，之前已经绑定的事件和类将会被移除，新添加的HTML内容不会继承之前的事件和类。

解决这个问题的方法有多种，以下是一些常见的解决方案：

1. 使用事件委托：将事件绑定到父元素上，通过事件冒泡的机制来处理子元素的事件。这样即使通过innerHTML添加了新的HTML内容，事件仍然能够被正确地处理。
2. 使用事件代理库：例如jQuery的.on()方法或者Zepto的.delegate()方法，它们可以帮助我们在动态添加的元素上绑定事件。
3. 在添加innerHTML之后重新绑定事件：在使用innerHTML添加新的HTML内容后，手动重新绑定需要的事件。这样可以确保新添加的元素也能够正确地响应事件。
4. 使用其他方法替代innerHTML：可以考虑使用其他方法来添加HTML内容，例如createElement()、appendChild()等。这些方法不会重新渲染整个页面，而是直接在DOM中添加新的元素，不会影响已有的事件和类。

总结起来，同一页面上添加innerHTML后切换类不起作用的原因是因为innerHTML会重新渲染整个页面的HTML结构，导致之前已经绑定的事件和类失效。为了解决这个问题，可以使用事件委托、事件代理库、重新绑定事件或者使用其他方法来添加HTML内容。