Framework7主题切换页面无法全局生效，仅主索引文件可用求助

这个问题的核心原因是Framework7的子页面是动态加载的：当你在全局脚本里执行事件绑定代码时，theme页面的DOM元素还没被渲染到页面中，导致$$('input[name="color-radio"]')找不到目标元素，事件也就没能成功绑定。而把代码放到主索引文件时，这些元素一开始就存在于初始DOM中，所以事件绑定能正常生效。

下面给你三种可行的解决方案：

方案一：利用Framework7页面生命周期事件绑定 #

Framework7提供了页面初始化的专属事件（比如page:init），我们可以在指定页面加载完成后再绑定事件，确保目标元素已经存在于DOM中。

在你的App初始化代码中添加以下逻辑：

// 监听页面初始化事件
app.on('page:init', function(page) {
  // 只在theme页面执行绑定逻辑
  if (page.name === 'theme') {
    $$(page.el).find('input[name="color-radio"]').on('change', function() {
      if (this.checked) {
        $$('.view').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white');
        $$('.view').addClass('color-theme-' + $$(this).val());
      }
    });
  }
});

方案二：使用事件委托绑定 #

事件委托是把事件绑定到一个已经存在的父元素上（比如.view或者document），通过事件冒泡机制处理动态生成元素的事件——不管元素是初始就存在还是后来动态加载的，都能触发事件。

修改你的事件绑定代码为：

$$('.view').on('change', 'input[name="color-radio"]', function() {
  if (this.checked) {
    $$('.view').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white');
    $$('.view').addClass('color-theme-' + $$(this).val());
  }
});

方案三：直接在子页面内添加脚本 #

把事件绑定的脚本直接放在theme页面的末尾，确保页面DOM渲染完成后再执行脚本：

<div class="page" data-name="theme">
  <div class="page-content">
    <div class="block-title">Elige el color del tema:</div>
    <div class="list">
      <ul>
        <li><label class="item-radio item-content">
          <input name="color-radio" value="red" type="radio"><i class="icon icon-radio"></i>
          <div class="item-inner"><div class="item-title">Red</div></div>
        </label></li>
        <li><label class="item-radio item-content">
          <input name="color-radio" value="green" type="radio"><i class="icon-radio"></i>
          <div class="item-inner"><div class="item-title">Green</div></div>
        </label></li>
        <!--And so on with other colors-->
      </ul>
    </div>
  </div>
  <script>
    $$('input[name="color-radio"]').on('change', function() {
      if (this.checked) {
        $$('.view').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white');
        $$('.view').addClass('color-theme-' + $$(this).val());
      }
    });
  </script>
</div>

以上三种方案都能解决你的问题，你可以根据自己的项目结构选择最适合的一种。

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