如何在动态加载的html内容上应用css（jquery mobile+；主干线+；phonegap）_Css_Jquery Mobile_Dom_Backbone.js_Cordova

如何在动态加载的html内容上应用css（jquery mobile+；主干线+；phonegap）

css jquery-mobile dom backbone.js cordova

如何在动态加载的html内容上应用css（jquery mobile+；主干线+；phonegap）,css,jquery-mobile,dom,backbone.js,cordova,Css,Jquery Mobile,Dom,Backbone.js,Cordova,我有如下的系统设置音差路由骨干网用于dom操作和UI的Jquery+jquerymobile 在主干视图中，我从一个文件动态加载一个模板，并尝试将其注入html，但在加载页面后，没有css应用于动态注入的内容。我试过了page（）等的所有方法，但都没有效果这是我的密码看法路由器 //jquery changepage changePage: function (page, page_reverse, page_transition) { ale

我有如下的系统设置

音差路由骨干网用于dom操作和UI的Jquery+jquerymobile

在主干视图中，我从一个文件动态加载一个模板，并尝试将其注入html，但在加载页面后，没有css应用于动态注入的内容。我试过了page（）等的所有方法，但都没有效果

这是我的密码

看法

路由器

//jquery changepage
        changePage: function (page, page_reverse, page_transition) {
            alert('change page called '+page.page_id);
            try {
page.render();
$.mobile.changePage($(this.currentView.el), {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
            } catch (error) {
                DEBUG(MSG_TYPE_ERROR,' change page error in router >> '+error.message+' : '+error.stack,'AppRouter');
            }
        }

我尝试注入的html

<div id="main_template_wrapper">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>title</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="a">
        <a href='#userprofile' data-role="button">userprofile</a>
        <a href='#login' data-role="button">login</a>
        <a href='#tutorial/1/1' data-role="button">tutorial</a>
        <a href='./spec.html'>Jasming</a>
    </div><!-- /content -->
    <div data-role="footer" data-id="fool" data-position="fixed" data-theme="b">
        <div data-role="navbar">
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>


标题

注入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=false">
    <script type="text/javascript" src="js/library/phonegap/cordova.js"></script>
    <!-- Load jquery css files -->
    <link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.3.2.min.css">
    <!-- use require.js to load system -->
    <script data-main="js/main.js" src="js/library/require/require.js"></script>
    <!-- <script data-main="js/jm_requirejs_test.js" src="js/library/require/require.js"></script> -->
    <title>Title</title>
</head>
<body class="main_body">
<div id="page_holder">
</div>
</body>
</html>


标题

请帮忙，我尝试了所有可能的组合使用页面，甚至做了$（document）.page（）这应用了css，但很多其他东西都坏了

this.$el.html(template).page();

代码中的上述行使用了不推荐使用的jQM方法。从此行中删除

page（）

。无论如何，你不需要这样做。你只是把它注入DOM<代码>更改页面将自动初始化该页面的样式

this.$el.attr('data-role','page');

删除此行并在模板中添加

data role=page

，如下所示：

<div id="main_template_wrapper" data-role="page">

在这行中，

this.$el

就可以了。删除对

html（）

的调用

在上面的一行中，

$（this.currentView.el）

可以制作成页面的

id

<代码>更改页面与ID配合使用效果最佳

希望这有帮助

这应该是一个CSS问题。您尝试了

$（'pageID'）。触发器（'pagecreate'）

在注入项目后？@Sushanth NO.这是一个js问题。CSS将始终应用于页面上的内容，您的CSS文件可能没有实际加载。您在哪里加载自定义CSS文件？谢谢从中删除.html。$el是一个很好的提示，我也被迫不使用data role='page'并将其直接附加到正文中，在这些之后，它起了作用。很好。请将此标记为您认为这对您有帮助的答案。

<div id="main_template_wrapper" data-role="page">

$(this.holder).html(this.$el.html());

$.mobile.changePage($(this.currentView.el),..