jQueryMobile 'data-scroll=true' 不适用于动态注入的页面
Posted
技术标签:
【中文标题】jQueryMobile \'data-scroll=true\' 不适用于动态注入的页面【英文标题】:jQueryMobile 'data-scroll=true' does not work on dynamically injected pagesjQueryMobile 'data-scroll=true' 不适用于动态注入的页面 【发布时间】:2012-01-11 11:34:20 【问题描述】:data-scroll="true"
如果页面是静态页面,则可以正常工作,但如果我使用 javascript 动态添加页面,则无法正常工作。
我的标题部分是:
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script>
<script type="text/javascript" src="js/scrollview.js"></script>
我还添加了data-scroll
属性并使用javascript 将其设置为true
,下面是我的代码:
var pagehtml = "<div data-role='page' data-scroll='true' id=page" + pageId + " data-url=page" + pageId + ">";
var pageHeader = "<div data-role='header' data-position='fixed'><h1>" + menuItem + "</h1></div>";
var pageContent = "<div data-role='content' id='page" + pageId + "Content'></div>";
var page = pageHtml + pageHeader + pageContent + "</div>";
$(page).appendTo($.mobile.pageContainer);
请帮帮我……
【问题讨论】:
查看您发布的内容 jQM 尚不支持 jQuery 1.7.x 应该使用 1.6.4,您应该升级到 jQM 1.0 并链接到演示(如 jsfiddle.net)会有所帮助以及您遇到的任何错误 【参考方案1】:试试这样的:
$('yourScrollersId').scrollview();
我遇到了同样的问题,为我工作。
迟到总比没有好:-)
【讨论】:
【参考方案2】:经过长时间的研究,我发现是-
我们需要将每个滚动块的动态 HTML 加载到唯一的容器中。
例如-
HTML
<div data-role="content" id="container">
<div id="scrollContainer"></div>
<div id="anotherContainer"></div>
</div>
JS
如果我们一开始在 'scrollContainer' 上加载了一个滚动视图,
$('#scrollContainer').html(loadHtml);
$("#scrollContainer").scrollview();
$("#scrollContainer").trigger('create');
那么下一次,我们需要加载到不同的容器中-
$('#anotherContainer').html(loadHtml);
$("#anotherContainer").scrollview();
$("#anotherContainer").trigger('create');
可选
要再次动态加载到#scrollContainer
,我们可以删除并重新创建<div>
。
执行第二个代码块后
$('#scrollContainer').remove();
$('#container').append('<div id="scrollContainer"></div>');
//$('#scrollContainer').empty(); // simply making this DIV empty WILL NOT WORK, we need to REMOVE DYNAMIC CLASSES, STYLES also. So, its better to recreate the LOADCONTAINER
应该有其他解决方案,但这个确实有效。
【讨论】:
【参考方案3】:您需要 JQM 应用该页面 - 尝试
$(page).appendTo($.mobile.pageContainer).page();
甚至
$(page).appendTo($.mobile.pageContainer).trigger('create');
希望对你有帮助
更新:这里是JQM documentation,关于如何正式执行此操作
【讨论】:
以上是关于jQueryMobile 'data-scroll=true' 不适用于动态注入的页面的主要内容,如果未能解决你的问题,请参考以下文章
利用jquerymobile怎么写js代码?还跟jquery写事件方法一样吗?求大神帮帮忙
jquerymobile 1.3.X - splitview 的任何最新插件