jQueryMobile 'data-scroll=true' does not work on dynamically injected pages

问题

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

My Header section is :

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

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

Please help me...

回答1:

Try something like this:

$('yourScrollersId').scrollview();

I had the same problem, worked for me.

Better later than never :-)

回答2:

After a long research, what I found is-

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

for eg.-

HTML

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

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

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

</div>

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

Optional

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.

回答3:

You need to JQM apply that page - try

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

or even

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

Hope this helps

UPDATE: here's the JQM documentation on how to officially do this

来源：https://stackoverflow.com/questions/8356324/jquerymobile-data-scroll-true-does-not-work-on-dynamically-injected-pages

标签

jquery

html

dom

jquery-mobile

scrollview