youjenlee
youjenlee

Reputation: 69

Why didnt' jQuery mobile enhance elements in a div after i call enhanceWithin()?

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

Answers (1)

PeterKA
PeterKA

Reputation: 24648

DEMO

Your code should work fine in 1.4.x.

Use .trigger('create') in 1.3.x (and below) instead of .enhanceWithin()

Upvotes: 1

Related Questions