DOM refresh aus JavaScript

27 views
Skip to first unread message

Marco Estrada Martinez

unread,
Sep 17, 2011, 8:00:03 AM9/17/11
to jQuery (Deutsch)
Hi @ all,

ich folgendes Problem (Ich entwickle mit Phonegap 1.0 + JQM 1.0b3),
dass die DOM nicht zeitnah aktualisiert wird. Beispiel. Nach betätigen
des "Los-Knopfes" auf page eins soll ein div "Halbtransparent" über
die ganze Seite angezeigt werden. Dieser wird erst nach dem lauf der
Schleife über 1000 angezeigt und nicht wie in der funktion definiert
vor der schleife. Idee warum das so ist?

Danke und beste Grüße
Marco

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">

<link rel="stylesheet" href="css/jquery.mobile.min.css" />
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.mobile.min.js">
</script>
</head>
<body>
<div data-role="page" id="eins">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="list">
<li data-role="list-divider">Übersicht</li>
<li><a href="#">1. Eintrag</a></li>
</ul>

<br />
<br />
<a href="#" id="btn" data-role="button" data-icon="check">los</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="zwei">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#">Eins</a></li>
<li><a href="#">Zwei</a></li>
</ul>

<br />
<br />
<a href="#" id="btn2" data-role="button" data-icon="check">los</a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div id="trans" style="width:100%; height:100%; opacity:0.5;
background-color:black;"></div>
<script type="text/javascript" src="js/mtc.js"></script>
</body>
</html>

JS:

$('#btn').live('vclick', function(event, ui){
t();
});

$('#btn2').live('vclick', function(event, ui){
$.mobile.changePage('#eins');
});

var list = $('#list');
h();

function t(){
s();
c();

for (var i = 2; i <= 1000; i++) {
list.append('<li><a href="#">'+i+'. Eintrag</a></
li>').trigger('create');
}

h();
}

function s () {
$('#trans').show();
}

function c () {
$.mobile.changePage('#zwei');
}

function h () {
$('#trans').hide();
}
Reply all
Reply to author
Forward
0 new messages