Question

我认为标题是不言自明的，但我们走了：我是jQuery和移动开发的新手。在使用jQuery Mobile标准.css文件时（我实际上在这里找到了解释：http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html），我试图通过JS函数动态地将div内容交换到另一个，但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-less”html按钮。

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

修改

为了从斯科特的答案中找出一些意义，我尝试了一些东西：

<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>

仍会呈现“陈旧按钮”。

Answer 1

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

在交换div内容时无法使用jQuery Mobile保留CSS主题

1 个答案: