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,我们可以删除并重新创建&lt;div&gt;。 执行第二个代码块后

$('#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实例源代码

jquerymobile 1.3.X - splitview 的任何最新插件

jquerymobile使用技巧

Phonegap + jQueryMobile + iOS 上的 PushNotifications

JqueryMobile 弹出菜单不起作用