jQuery mobile Anhängen von html-code
Möchte ich anfügen, einige code, der auf eine Seite mit jQuery/jQuery mobile, ich möchte nur anfügen, wenn Sie nicht bei jedem Besuch der Seite.
** final * * edit
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() //get error when I use this
$('#page1').live('pageshow', function ()
{
// alert("!");
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pageshow', function ()
{
// alert("!");
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
- gib mir 2 Minuten, ich will fix ein paar Sachen!!!!!
- ein paar Sachen verändert,
- versucht, die änderung zu "pagecreate"
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie prüfen, die für die Existenz von code, den Sie anfügen, bevor Sie tatsächlich Anhängen. Auf diese Weise auf spätere Besuche auf der Seite werden die Daten nicht Hinzugefügt werden:
Hinweis, dass ich die 'appended_code' - Klasse auf den Absatz-tag, das Sie anfügen, und das ist der Selektor, die ich verwendet, um zu überprüfen, die für die Existenz der angefügten code.
--Update--
Können Sie auch das clean-up der code ein wenig, wenn Sie mit Namenskonventionen, basierend auf zahlen:
Beachten Sie, dass die
div[id^="page"]
Selektor sucht nach divs mit einer id, der beginnt mit "Seite"Hier ein jsfiddle für ya: http://jsfiddle.net/S3wE6/1/
Wenn Sie möchten, dass die Daten angehängt werden, die auf den ersten laden, ich würde empfehlen, die Linie der code wo die Daten angehängt, die in eine Funktion und ruft Sie auf
$(document).ready();
ok das war ein wenig schwierig, aber hier ist eine live version:
JS:
HTML:
Diese scheinen zu funktionieren .. mit minimalen änderungen. Nur add on pagecreate Veranstaltung.