目标: 通过加载HTML内容$.ajax,将其插入DOM,让jQuery Mobile应用主题样式.
问题: 内容被插入但缺少jQuery Mobile主题.
码:
$.ajax({
...
success: function(html) {
$('#container').append(html);
$('#page').page('refresh', true);
}
});
返回的HTML包含data-rolejQM应该样式的标签......
<a data-role="button">Do Something</a>
我没有应用它应该的样式,而是出现以下错误:
未捕获的异常:没有这样的方法'刷新'页面小部件实例
以上代码测试使用 http://code.jquery.com/mobile/latest/jquery.mobile.js
类似的问题让我收到上述错误信息:
我正在学习AngularJS并构建了一个小应用程序.现在功能已经完成了,我想用jQuery Mobile来设置它.
最初我放弃了tigbro的jquery-mobile-angular-adapter,但最终决定它比我需要的更复杂和更复杂.我不是在jQuery Mobile中进行任何花哨的屏幕转换或页面管理功能 - 我只是想用它来设置应用程序的样式,让AngularJS处理剩下的事情.
我读过这篇文章,它有着相同的目标,尽管有另一个框架,并且包含一个禁用jQuery Mobile路由的代码片段.
我已按照脚本加载的顺序将该代码段应用于我的应用程序,就在关闭正文标记之前:
这个片段放置是唯一可行的,或者在某种程度上可行的,因为我的索引中的任何内容都正确加载样式(基本上是标题和主导航),我的AngularJS路径工作得很好,但任何动态加载的模板都填充了我的ng -view,尽管有jQuery Mobile数据角色(如列表视图等),但jQuery Mobile并没有设置样式; 它们只是简单的HTML.
有没有人知道如何让这些动态加载的模板也被设置样式？
我的索引HTML结构如下所示:
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>MyApp</h1>
<a href="#/home">Home</a>
<a href="#/add_item">Add</a>
</div>
<div data-role="content" ng-view></div>
</div>
<!-- Scripts -->
</body>
这是我的一个模板的示例:
<ul data-role="listview" ng-controller="MyListCtrl">
<li ng:repeat="item in things">
<a href="#/item/{{ item.ID }}">{{ item.title }}<br/>{{ formatDateForDisplay(item.addDate) }}</a>
</li>
</ul>
谢谢!
当我第二次导航到详细信息页面时,页面变得赤裸裸,所有样式都从页面消失,我可以找出原因,例如http://jsfiddle.net/Hpyca/24/
HTML
<div data-role="page" id="dashBoardPage" data-bind="with: dashboardData">
<button type="button" data-bind="click: goToList">DashBoard!</button>
</div>
<div data-role="page" id="firstPage" data-bind="with: hospitalList">
<div>
<div id="listViewDiv">
<ul data-role="listview" data-bind="foreach: hospitals">
<li data-bind="click: $parent.selectHospital">
<h2>Hospital Id:<span data-bind="text:id"></span></h2>
<p>Name <span data-bind="text:name"></span></p>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="detailsView" data-bind="with: hospitalList.selectedHospital">
<a href="#firstPage">Back</a>
<a href="#dashBoardPage">Home</a>
<div>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">Info</a></li>
<li><a href="#two" data-ajax="false">Details</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h2>Hospital Id : <span data-bind="text:id"></span></h2>
</div>
<div id="two">
<h2>Id : <span data-bind="text:id"></span></h2>
<input …我在一个jquery移动页面中使用Handlebarsjs,当我从服务器发回数据时,它被插入到模板中......但是没有一个jquery移动CSS样式应用于模板内的代码.
我的模板看起来像这样:
<script id="card_list_template" type="text/x-handlebars-template">
{{#each this}}
<li>
<a href="#">
<img src="{{path}}" />
<h3>{{first_name}} {{last_name}}</h3>
<p>Card Owner: {{user_id}}</p>
</a>
</li>
{{/each}}
</script>
上面的代码块插入到这个无序列表中:
<ul id="search_results" data-role="listview" data-theme="a">
data-role ="listview"应该将某种样式应用于列表项,但它不适用于通过模板生成的项.
我想知道我在这里遗失了什么......
如果我写
<a onclick="deleteThis()" data-role="button" data-theme="a">Button text</a>
在HTML页面的正文中它可以正常工作.但是当我以编程方式尝试使用以下内容添加新按钮时:
$('.block').append('<a onclick="deleteThis()" data-role="button" data-theme="a">' + results[i].Title + '</a>');
只是没有JQuery移动样式,链接很好地附加,data-theme ="a"应该将特定颜色样本css应用于相关元素.
我哪里错了？
我有2 Button,当点击时,添加一个新段落或删除当前段落.这是使用完成的jQuery.我也jQuery用来将段落文本的颜色从黑色更改为红色hover.我遇到的问题是,在添加新段落后jQuery,悬停效果未应用于它.它适用于原始段落,但不适用于动态创建的段落.
当我查看source code页面时,我看到原始段落应用了内联样式,但不是我添加的内容jQuery.我一直在寻找最后一小时试图寻找解决方案,但到目前为止没有一个对我有用.我发现了一些类似的问题,但解决方案要么对我不起作用,要么我没有正确应用它们.问题是我jQuery几个小时前开始学习,因此无法确定我是在修理某些东西还是让它变得更糟.此外,我所看到的大多数问题都与jQuery移动设备有关,因为我正在使用我的电脑,这让我更加困惑.
HTML
<button>Add line</button>
<button>Remove line</button>
<div id="p_wrap">
<p> Original Line </p>
<p> Original Line </p>
<p> Original Line </p>
</div>
jQuery的
$(document).ready(function(){
//Add line
$("button:nth-of-type(1)").click(function(){
$("#p_wrap").append("<p>New Line</p>");
});
//Remove line
$("button:nth-of-type(2)").click(function(){
$("p:last-of-type").remove();
});
//Hover effect
$("p").hover(
function(){
$(this).css("color", "red");
},
function(){
$(this).css("color", "black");
}
);
}); // Document Ready End
以下是我已经看过的一些问题:
强制jQuery Mobile重新评估动态插入内容的样式/主题
我提前道歉,因为这可能是一个noob问题,但它让我难过,我会感激任何帮助.
-谢谢