css - jQuery Mobile - 触发后加载 MyCss

Question

我终于找到了正确的命令来刷新我的东西。所以我正在做的是，使用 $load 动态更改我的 div contentindex，如下所示:

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

这在我的元素上应用了 jQM css，但遗憾的是它弄乱了 MyCss，正如您在图片中看到的那样。左边的没有 jQM css，右边的是我的 buggy 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 片段加载到:

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

现在，当我触发时，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');
});