jQueryMobile'data-scroll = true'在动态注入的页面上不起作用

问题描述

data-scroll="true"可以正常工作，但是如果我使用javascript动态添加页面，则无法正常工作.

data-scroll="true" works fine if the page is static page, but if I add page dynamically using javascript it does not work.

我的标题部分是:

<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，以下是我的代码:

I also added the data-scroll attribute and set it to true using javascript, below is my code :

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

请帮助我...

推荐答案

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

After a long research, what I found is-

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

we need to load the dynamic HTML, for each scroll block, to unique container s.

例如-

HTML

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

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

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

</div>

JS

如果我们首先在'scrollContainer'上加载了一个滚动视图，

if we loaded a scrollview on 'scrollContainer' at first,

$('#scrollContainer').html(loadHtml);
$("#scrollContainer").scrollview();
$("#scrollContainer").trigger('create');

然后下一次，我们需要加载到其他容器中

then next time, we need to load in a different container-

$('#anotherContainer').html(loadHtml);
$("#anotherContainer").scrollview();
$("#anotherContainer").trigger('create');

可选

要再次动态加载到#scrollContainer中，我们可以删除&重新创建<div>.在执行第二个代码块之后

To again dynamically load into #scrollContainer, we can remove & recreate the <div>.after executing the second code block

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

应该有其他解决方案，但这确实可行.

other solutions should be there, but this one really works.

这篇关于jQueryMobile'data-scroll = true'在动态注入的页面上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！