jQuery Mobile - 触发后加载 MyCss

Question

我终于找到了正确的命令来刷新我的东西。 所以我正在做的是，像这样用$load动态改变我的div contentindex：

$("#contentindex").load("offline/indexoffline.html", function() {
                $('#contentindex').appendTo('.ui-page').trigger('create');  
                });

这会将 jQM css 应用于我的元素，但遗憾的是它弄乱了 MyCss，正如您在图片中看到的那样。左边的是没有 jQM css，右边的是我的 bug 的 css：

#start {
text-align: center;
position: fixed;
top: 30%;
left: 0;
right: 0;}
#startbutton {
position: fixed;
width: 80% !important;
left: 10%;
top: 55%;
}

http://oi41.tinypic.com/j9rn0p.jpg

我希望你能帮助我，我不知道如何解决这个问题。 :( 非常感谢。

编辑：更多代码： 在我的 index.html 上，我有一个运行此功能的按钮：

$("#contentindex").load("offline/indexoffline.html", function() {
            $('#contentindex').appendTo('.ui-page').trigger('create');
            });

contentindex 是页眉和页脚之间的 div 的 id。 现在我将这个 html sn-p 加载到：

<style>
#start {
text-align: center;
position: fixed;
top: 30%;
left: 0;
right: 0;
}

#startbutton {
position: fixed;
width: 80% !important;
left: 10%;
top: 55%;
  }


  </style>
  <article data-role="content">
        <h3 id="start">Drücke Start,<br> um eine neue Runde zu starten.</h3>
        <button id="startbutton" type="button" data-role="button"   onclick="newround()">Start</button>
    </article>

现在，当我 trigger startbutton 的 css 在 jQuery Mobile 中进行转换时，还会重置位置。所以我想我需要为我的 css 东西制作一个额外的文件，并在触发发生后应用这个文件。但是我该怎么做呢？ :(

Answer 1

您可以做什么，将您的样式转换为.class，然后在增强新元素后添加它们。

.start {
  text-align: center !important;
  position: fixed !important;
  top: 30% !important;
  left: 0 !important;
  right: 0 !important;
}

.startbutton {
  position: fixed !important;
  width: 80% !important;
  left: 10% !important;
  top: 55% !important;
}

然后

$("#contentindex").load("offline/indexoffline.html", function() {
  $('#contentindex').appendTo('.ui-page').trigger('create');
  $('#start').addClass('start');
  $('#startbutton').addClass('startbutton');
});