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）会有所帮助以及您遇到的任何错误

标签： jquery html dom jquery-mobile scrollview

【解决方案1】：

试试这样的：

$('yourScrollersId').scrollview();

我遇到了同样的问题，为我工作。

迟到总比没有好:-)

【讨论】：

【解决方案2】：

经过长时间的研究，我发现是-

我们需要将每个滚动块的动态 HTML 加载到唯一的容器中。

例如-

HTML

<div data-role="content" id="container">

    <div id="scrollContainer"></div>

    <div id="anotherContainer"></div>

</div>

如果我们一开始在 '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，关于如何正式执行此操作

【讨论】：