jQuery Mobile CSS没有样式化JS插入HTML [英] jQuery Mobile CSS not styling JS-inserted HTML

问题描述

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

I'm making a mobile web app with Backbone.js and jQuery Mobile but I'm having some styling issues. Just to test things out I wanted to style my Logout button. Before styling, I had:

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

在我的代码的某一点，一直运作良好。我将此行更改为：

at a certain point at my code, which had been working fine. I changed this line to:

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

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

But, when I do this, it just displays "LOGOUT" as a plain link with no CSS applied. I tried putting the same code in the body of my HTML file instead of inserting it with JS and it was styled correctly. I load my CSS file in the head of my document before all other files and my JS code is contained in a function bound to $(document).ready() so I'm not sure why the CSS is not working.

我错过了一些概念性的东西吗？我该如何解决这个问题？

Am I missing something conceptual? How can I fix this?

推荐答案

我认为你需要使用 buttonMarkup 刷新这样的样式：

I think you need to use buttonMarkup to refresh styling like this :

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

其中 #one 只是一个随机页面用HTML格式。

Where #one is just a random page in HTML.

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

使用jQM不要使用准备事件。

这篇关于jQuery Mobile CSS没有样式化JS插入HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！