Javascript 如何呈现jquerymobilei对象postpage加载

我在客户端使用JS生成了一些HTML。我仍然希望将jQuery Mobile UI的样式和功能应用到这些对象上。我似乎不明白怎么

假设我生成一个：

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

---

jQuery Mobile UI是否有类似的功能？

如果调用pagecreate

$('#page').live('pagecreate',function(event){
    $('#elem_container').page();
});

你去做一次循环骑行。我编写了自己的enhance（）函数来解决这个问题

$('#page').live('pagecreate',function(event){
    enhance($('#elem_container'));
});

该函数基本上只是压缩了下面的代码

function enhance(dis){
    dis.find( "[type='radio'], [type='checkbox']" ).checkboxradio();
    dis.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).not( ".ui-nojs" ).button();
    dis.find( "input, textarea" ).not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).textinput();
    dis.find( "input, select" ).filter( "[data-role='slider'], [data-type='range']" ).slider();
    dis.find( "select:not([data-role='slider'])" ).selectmenu();
}

旧帖：

在挖掘了jQuery移动文件之后，我终于找到了答案。。。其实很简单

$("#select-choice-3").selectmenu();

这是我在里面找到的一段代码

_enchanceControls: function() {
    var o = this.options;
    // degrade inputs to avoid poorly implemented native functionality
    this.element.find( "input" ).each(function() {
        var type = this.getAttribute( "type" );
        if ( o.degradeInputs[ type ] ) {
            $( this ).replaceWith(
                $( "<div>" ).html( $(this).clone() ).html()
                    .replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
        }
    });

    // enchance form controls
    this.element
        .find( "[type='radio'], [type='checkbox']" )
        .checkboxradio();

    this.element
        .find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .not( ".ui-nojs" )
        .button();

    this.element
        .find( "input, textarea" )
        .not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .textinput();

    this.element
        .find( "input, select" )
        .filter( "[data-role='slider'], [data-type='range']" )
        .slider();

    this.element
        .find( "select:not([data-role='slider'])" )
        .selectmenu();
}

\u enchanceControls:function（）{
var o=此选项；
//降低输入以避免本机功能实现不佳
this.element.find（“input”）.each（function（）{
var type=this.getAttribute（“type”）；
如果（o.D.输入[类型]）{
$（此）。替换为(
$（“”）.html（$（this.clone（））.html（）
.replace（/type=“[a-zA-Z]+）”/，“数据类型=”$1'）；
}
});
//增强窗体控件
这个元素
.find（“[type='radio']，[type='checkbox']”）
.checkboxradio（）；
这个元素
.find（“按钮，[type='button']，[type='submit']，[type='reset']，[type='image']））
.not（“.ui nojs”）
.按钮（）；
这个元素
.find（“输入，文本区域”）
.not（“[type='radio']，[type='checkbox']，[type='button']，[type='submit']，[type='reset']，[type='image']”）
.textinput（）；
这个元素
.find（“输入，选择”）
.filter（“[data role='slider']，[data type='range']”）
.滑块（）；
这个元素
.find（“选择：非（[data role='slider']））
.selectmenu（）；
}

更新

是啊！事件的新实现刚刚登陆

现在在beta2中，将有一个

create

事件，在元素上触发该事件将导致其呈现

当beta2发布时，我将更新faq

找到添加到DOM的最顶层元素，并在其上调用

.page（）

。 实际上，这个问题重复了许多其他标记为jquery-mobile的问题，因此我创建了一个快照教程，不再每次都对其进行描述

---

请参阅此处的第一篇文章：

如果只刷新单个组件，则可以为该元素使用特定的finction。否则，您可以使用分析DOM元素并自动使用所有可用小部件的

.page（）

：）如果在pagebeforecreate上调用它失败，这是可以理解的，如果在pagecreate上执行递归循环。我编写了自己的enhance（）函数来解决这个问题。。。详细阐述了我下面的另一个答案。你有没有可能提供一个例子或链接。。。？最好不过如果你把它作为一个答案，我会投票给它，并给它的答案检查…天哪。。。真是一团糟。。。我只是发布了一些不真实的东西：（事件将不会实现，因为有一个基于已经可用的东西的解决方案。我将做一些笔记并发布它们。[删除我的评论，以免混淆人们]一切都很好，结局都很好。事件已实现，将在beta2中发布！：）请稍等。

_enchanceControls: function() {
    var o = this.options;
    // degrade inputs to avoid poorly implemented native functionality
    this.element.find( "input" ).each(function() {
        var type = this.getAttribute( "type" );
        if ( o.degradeInputs[ type ] ) {
            $( this ).replaceWith(
                $( "<div>" ).html( $(this).clone() ).html()
                    .replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
        }
    });

    // enchance form controls
    this.element
        .find( "[type='radio'], [type='checkbox']" )
        .checkboxradio();

    this.element
        .find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .not( ".ui-nojs" )
        .button();

    this.element
        .find( "input, textarea" )
        .not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .textinput();

    this.element
        .find( "input, select" )
        .filter( "[data-role='slider'], [data-type='range']" )
        .slider();

    this.element
        .find( "select:not([data-role='slider'])" )
        .selectmenu();
}