0

我认为标题是不言自明的，但我们开始吧：我是 jQuery 和移动开发的新手。在使用 jQuery Mobile 标准 .css 文件（我实际上在这里找到的解释：http: //www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html）时，我正在尝试动态交换一个 div 内容通过 JS 函数传递给另一个，但 css 主题不会延续。这是我的代码的简化版本：

<!DOCTYPE html> 
<html> 
  <head> 
    <title>My Page</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
      <script src="jquery-1.8.2.min.js"></script>
      <script src="jquery.mobile-1.2.0.min.js"></script>
      <script type="text/javascript">
        function callNext () {
        $('#div_auth').html($('#div_functions').html());
      }
      </script> 
  </head> 
  <body> 

    <div data-role="page" id="div_main">

      <div data-role="header">
        <h1>Phonegap Test</h1>
      </div>

      <div data-role="content" id="div_auth">   
        <form name="fields" action="">
          Name: <input type="text" id="login" name="login"/><br> 
          <button type="button" onclick="callNext();">Send</button>
        </form> 
      </div>

    </div>

    <div data-role="content" id="div_functions">
      <form name="functions" action="">
        <button type="button">Client List</button> <br>
        <button type="button">Price List</button>
      </form>
    </div>

  </body>
</html>

因此，当加载 div_auth 内容时，它默认加载 data-theme="a" （我想这在 div_main 而不是 div_auth 中隐含，但无论如何）。但是，当我单击按钮时，即使我为 div_functions 指定了数据主题，按钮也会呈现为标准的“无 css”html 按钮。

在任何人开始怀疑之前，请注意，我需要通过 JS 函数调用 div 交换，因为这只是我开始开发的 Phonegap/Cordova 应用程序的简化，并且该调用模拟了它的实际工作方式。但是，我测试了上面的代码，它（错误）的行为是一样的

编辑：

为了让斯科特的回答更有意义，我尝试了一些东西：

<div data-role="content" id="div_auth" data-theme="b">  
  <form name="fields" action="">
    Name: <input type="text" id="login" name="login"/><br> 
    <button data-theme="a" type="button" onclick="callNext();">Send</button>
  </form>   
</div>

如您所见，我将 data-theme="b" 显式添加到 div_auth 并将 data-theme="a" 添加到包装按钮。令我惊讶的是，它确实有效，其中 div_auth 采用蓝色主题，而按钮以黑色呈现。但是，在第二个 div (div_functions) 中使用相同的方法，即使使用相同的主题也会导致按钮没有附加 css 样式：

<button data-theme="a" type="button">Price List</button>

仍然呈现一个“陈旧的按钮”。

4

1 回答 1

0

匹配的 css 样式也#div_functions必须匹配#div_auth。您的 javascript 行不复制任何样式，只复制内容。当该内容附加到 时#div_auth，它将采用与该元素匹配的任何 CSS 样式，在这种情况下，这似乎什么都不是。最简单的做法是为 创建 CSS 样式button，这将匹配您的按钮标签，无论它们在 DOM 中的什么位置。

于 2013-01-21T19:28:25.317 回答