jQueryMobile 'data-scroll=true'不适用于动态注入的页面

Question

如果页面是静态页面，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);

请帮助我...

Answer 1

尝试这样的事情：

$('yourScrollersId').scrollview();

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

迟做总比不做好:-)

Answer 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');

- 可选< /strong>

要再次动态加载到 #scrollContainer 中，我们可以删除 &重新创建

。
执行第二个代码块后，

$('#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

应该还有其他解决方案，但这个确实有效。

Answer 3

您需要 JQM 应用该页面 - 尝试

$(page).appendTo($.mobile.pageContainer).page();

甚至

$(page).appendTo($.mobile.pageContainer).trigger('create');

希望这有助于

更新：这是 JQM关于如何正式执行此操作的文档