Reputation: 69
I am learning how to render mobile web page using jQuery mobile, coding on jsfiddle. When I follow the way shown in jQuery mobile document to enhance appended elements after web page loaded, the result seems like that enhanceWithin method of jQuery mobile didn't work properly.
I am wondering what's wrong with my code? Or this was caused by jsFiddle? Maybe it couldn't emulate in some situation?
This is my html code:
<div data-role="page">
<div data-role="header" data-position='fixed'>
<a href="#" id="back" data-role="back" data-rel="back">Back</a>
<div id="head">Title</div>
</div>
<div id="content" data-role="content">
<ul id="items" data-role="listview" data-inset="true">
<li><a href='#'>Sony TV</a></li>
<li><a href='#'>Samsung Note 3</a></li>
<li><a href='#'>ASUS zenfone</a></li>
</ul>
<div id="insert">
</div>
<div>
<div data-role="footer" data-position='fixed'>
<div id="foot">copy right.</div>
</div>
</div>
Styles
#head{
font-size:35px;
height:100%;
line-height:100%;
text-align:center;
}
#foot{
font-size:30px;
height:100%;
line-height:100%;
text-align:center;
}
Scripts:
$("#items").append("<li><a href='#'>Sony Z3</a></li>")
.append("<li><a href='#'>Test</a></li>").listview("refresh");
var ctx =
"<ul id='newlistview' data-role='listview' data-inset='true'>" +
"<li><a href='#'>Line 1</a></li>" +
"<li><a href='#'>Line 2</a></li>" +
"</ul>";
$("#insert").append(ctx).enhanceWithin();
/*
$('#newlistview').listview({
inset:true
});
*/
Finally, the render result from jsFiddle
The result I expect to show is as well as the result made by calling .listview({options}) in the block commented.
But I just can't make it with enhanceWithin() method, which I intend to enhance huger code block with many widgets later.
Upvotes: 1
Views: 2230