为什么没有'我调用enhanceWithin()之后jQuery mobile增强了div中的元素?

时间:2014-09-21 04:51:26

标签: jquery jquery-mobile

我正在学习如何使用jQuery mobile渲染移动网页,在jsfiddle上编码。 当我按照jQuery mobile document中显示的方式加载网页加载后增强附加元素时,结果似乎是jQuery mobile的EnhanceWithin方法无法正常工作。

我想知道我的代码有什么问题?或者这是由jsFiddle引起的? 也许它在某些情况下无法效仿?

这是我的HTML代码:

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

样式

#head{
    font-size:35px;
    height:100%;
    line-height:100%;
    text-align:center;
}
#foot{
    font-size:30px;
    height:100%;
    line-height:100%;
    text-align:center;
}

脚本:

$("#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
});
*/

最后,jsFiddle

的渲染结果

我希望显示的结果以及在评论的块中调用.listview({options})所得到的结果。

但是我无法使用enhanceWithin()方法制作它,我打算稍后使用许多小部件来增强huger代码块。

1 个答案:

答案 0 :(得分:1)

DEMO

您的代码应该在1.4.x

中正常运行

在1.3.x(及以下)中使用.trigger('create')而不是.enhanceWithin()