jquery mobile,需要刷新页面才能看到更改CSS
问题描述:
我是JQM的新手,但不是jquery。我正在使用在正常网页上正常工作的corner.js插件。jquery mobile,需要刷新页面才能看到更改CSS
所以我在html HEAD中有以下代码。
<script type="text/javascript">
$(document).ready(function() {
$('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");
});
</script>
我有以下DIV
<div data-role="content">
<div class="grid_outer" id="grid_outer_profile">
<div class="grid_inner" id="grid_inner_profile">
<table>
<tr>
<td><img src="<?php echo $avatarpath; ?>" /></td>
</tr>
<tr>
<td><?php echo $email; ?></td>
</tr>
<tr>
<td><?php echo $aboutme; ?></td>
</tr>
</table>
</div>
</div>
</div><!-- /content -->
的问题是,不应用CSS的角落。不在我的桌面,我的Android手机或Android Tab中。
只有在之后我会刷新它们的应用。我试图找出是否需要强制刷新组件,但如果是这样,我不知道如何为命名的DIV执行此操作。 或者,也许我从根本上做错了什么?
感谢您的帮助!
答
工作实例:http://jsfiddle.net/Gajotres/8pG6c/
文件准备是你的问题。通常它不应该与jQuery Mobile
一起使用,因为它可以(并且通常会)在jQuery Mobile
页面准备就绪之前触发。
可以固定一个正确jQuery Mobile
页面事件,你的情况使用:
$(document).on('pagebeforeshow', '#page-id', function(){
$('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");
});
page-id
是显示网格你的页面的ID,在我的例子的情况下,是#index
。
通常的方法是使用一个pageinit
事件,但在你的情况下更好的解决方案是pagebeforeshow
。 pageinit
每个加载的页面只触发一次事件触发(除非手动刷新页面)。
答
jQuery Mobile是面向页面的并实现了自己的文档加载策略。你必须绑定到pageinit事件,而不是ready:
$(document).on("pageinit", function(e) {
$("div.grid_inner", e.target)
.corner("round 8px")
.parent().css("padding", "4px").corner("round 14px");
});
恭敬地不同意,每个加载的页面将调用一次“pageinit”。你用'mobileinit'混淆了它吗? – 2013-03-04 16:15:14
您可以不同意所有您想要的内容,pageinit只会为每个加载的页面触发一次。 – Gajotres 2013-03-04 16:17:16
看起来我们同意,因为你最后一次编辑:)请注意,“每个加载页面一次”意味着每次通过AJAX获取新页面(因此不需要手动刷新)。 – 2013-03-04 16:18:53