jQuery Mobile CSS 没有样式化 JS 插入的 HTML

Question

我正在使用 Backbone.js 和 jQuery Mobile 制作一个移动网络应用程序，但我遇到了一些样式问题。只是为了测试一下，我想设计我的注销按钮的样式。在造型之前，我有:

this.$el.append('<input type="button" id="logoutButton" value="Logout">');

在我的代码的某个时刻，它一直运行良好。我将此行更改为:

this.$el.append('<a href="" data-role="button" data-theme="c" data-inline="true" id="logoutButton"> LOGOUT </a>');

但是，当我这样做时，它只是将“LOGOUT”显示为一个没有应用 CSS 的普通链接。我尝试将相同的代码放在我的 HTML 文件的正文中，而不是用 JS 插入它，并且它的样式正确。我在所有其他文件之前将我的 CSS 文件加载到文档的头部，并且我的 JS 代码包含在绑定(bind)到 $(document).ready() 的函数中，所以我不确定为什么 CSS不工作。

我是否遗漏了一些概念性的东西？我该如何解决这个问题？

Answer 1

我认为您需要像这样使用 buttonMarkup 来刷新样式:

$("#one").append('<a href="" data-role="button" data-theme="c" data-inline="true" id="logoutButton"> LOGOUT </a>')
$("#logoutButton").buttonMarkup("refresh");

#one 只是 HTML 中的一个随机页面。

演示:http://jsfiddle.net/hungerpain/tEnet/

And DONT USE ready event with jQM.